Vuetable-2使用全纪录

vuetable-2介绍

vuetable2是一款基于vuejs开发的table组件，支持表格加载和翻页、翻页信息展示的组件
官方github | 官方API学习 | Tutorial
vuetable-2包括三个部分：
- vuetable
- vuetablePagination
  - vuetablePaginationDropdown
  - vuetablePaginationMixin
- vuetablePaginationInfo
  - 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 class="network"><div class="filter-wrapper"><filter-bar @search="search"></filter-bar></div><div class="table-wrapper"><vuetable   :fields="fields":api-url='apiUrl':append-params="moreParams":filter="filter":http-method="method"></vuetable></div></div>

import FilterBar from './filterBar'
import Vuetable from '../components/vuetable'

vuetable

vuetable-pagination

vuetable-pagination-info

在使用过程中遇到的问题

原表格对于Bootstrap样式支持性不好，需要修改相关style样式
将对于表格限制条件挪出来，会涉及到很多两个子组件filterbar和vuetable之间的交流，通过同一父组件network很吃力
- 目前方法是：
  1. 在父组件network中定义一个状态值，如filterStatus，类型为Boolean
  2. 当filterbar组件的参数发生变化时，则对于filterStatus取反
  3. 将filterStatus通过this.$emit传递到父组件network
  4. 在父组件中设置computed属性值filter，其值为 return filterStatus
  5. 在父组件下的table组件中监听父组件传递下来的filter值，发生变化则触发vuetable的refresh事件
- 为什么这么做？
  - 父组件无法直接触发子组件vuetable的刷新事件
和后台的交互不太理想，后台使用的是java boot框架
- vuetable和后台交互采取axios，后台捕获不到相关数据，
  1. 需要修改请求头和序列化参数：

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 = [];}})}