宁乡建设局网站,有人看免费的视频吗,开发公司与物业公司的承包合同,上海网站工作室vuetable-2介绍
vuetable2是一款基于vuejs开发的table组件#xff0c;支持表格加载和翻页、翻页信息展示的组件官方github | 官方API学习 | Tutorialvuetable-2包括三个部分#xff1a; vuetablevuetablePagination vuetablePaginationDropdownvuetablePaginationMixinvue…vuetable-2介绍
vuetable2是一款基于vuejs开发的table组件支持表格加载和翻页、翻页信息展示的组件官方github | 官方API学习 | Tutorialvuetable-2包括三个部分 vuetablevuetablePagination vuetablePaginationDropdownvuetablePaginationMixinvuetablePaginationInfo vuetablePaginationInfoMixin
vuetable-2使用
我在项目中使用vuetable是基于vue-cli开发的使用vue-router管理前端路由所有path下的内容单独成一部分。 所以希望 1. 每个path内部的table组件是公共的 2. 对于path内部table的操作单独引用文件filterBar.vue 3. 对于表头的定义引用当前文件目录结构下的fieldDefs.js 4. 最后将table和filterbar集合到当前path主文件中 例如
div classnetworkdiv classfilter-wrapperfilter-bar searchsearch/filter-bar/divdiv classtable-wrappervuetable :fieldsfields:api-urlapiUrl:append-paramsmoreParams:filterfilter:http-methodmethod/vuetable/div/div
import FilterBar from ./filterBar
import Vuetable from ../components/vuetable
vuetable
vuetable-pagination
vuetable-pagination-info
在使用过程中遇到的问题
原表格对于Bootstrap样式支持性不好需要修改相关style样式将对于表格限制条件挪出来会涉及到很多两个子组件filterbar和vuetable之间的交流通过同一父组件network很吃力 目前方法是 在父组件network中定义一个状态值如filterStatus类型为Boolean当filterbar组件的参数发生变化时则对于filterStatus取反将filterStatus通过this.$emit传递到父组件network在父组件中设置computed属性值filter其值为 return filterStatus在父组件下的table组件中监听父组件传递下来的filter值发生变化则触发vuetable的refresh事件为什么这么做 父组件无法直接触发子组件vuetable的刷新事件和后台的交互不太理想后台使用的是java boot框架 vuetable和后台交互采取axios后台捕获不到相关数据 需要修改请求头和序列化参数
axios[this.httpMethod](this.apiUrl, qs.stringify(this.httpOptions), {headers: {Content-Type: application/x-www-form-urlencoded} 关于ES6箭头函数导致的this指向问题
比较两段代码
//代码1
methods: {getGoodsList () {axios.get(/goods).then((response) {var res response.data;if(res.status 0) {console.log(this);this.goodsList res.result.rows;}else {this.goodsList [];}})}}//代码2
getGoodsList: () {axios.get(/goods).then((response) {var res response.data;if(res.status 0) {console.log(this);//这里this是undeinedthis.goodsList res.result.rows;}else {this.goodsList [];}})}
如果用es5语法写goodsList能够正常获取值并更新视图其指向的是vue实例 而es6箭头函数则会提示this是指向了methods上下文具体参考
