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

在使用过程中遇到的问题

1. 原表格对于Bootstrap样式支持性不好，需要修改相关style样式
2. 将对于表格限制条件挪出来，会涉及到很多两个子组件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的刷新事件
3. 和后台的交互不太理想，后台使用的是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是undeined
       this.goodsList = res.result.rows;
       }else {
       this.goodsList = [];
       }
     })
   }

如果用es5语法写，goodsList能够正常获取值并更新视图，其指向的是vue实例， 而es6箭头函数则会提示this是指向了methods（上下文），具体参考