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很吃力

• 目前方法是：
  
• 在父組件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（上下文），具體參考

總結

以上是生活随笔為你收集整理的Vuetable-2使用全纪录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。