tmtTable設計說明文檔

文件連接：tmt-table.js

BOSS後臺項目用到最多的就是列表頁，因此把列表頁作成通用組件，能夠大大提升開發效率。

由於列表可能有不一樣的樣式，因此在實例化組件時能夠傳值控制樣式，用這種方式：

組件內部接收這個參數對象，判斷使用哪套樣式，若是不傳參，則使用默認的'default'樣式。

本組件有3個屬性值，分別爲：

props: { 
  //表格的基本參數和設置
  options: { required: true, default: {} }, 
  //返回當前點擊行的全部原始數據
  rowdata: { required: false, default: {} }, 
  //當前的頁數
  pagination: { required: false, default: 0 } 
},

組件的data屬性有三個變量：

data() { 
  return { 
    //分頁總數
    pageNum: 0,
    //當前頁數
    currentPage: 0,
    //樣式加載結束才顯示HTML頁面，防止樣式混亂
    isShow: false
 } 
},

當組件內部代碼所有編譯完成時，把依賴的bootstrap引入到頁面中，並在css加載完畢後顯示頁面：

ready() {
  var __this = this; 
  //插入依賴的CSS文件 
  var link = $('<link rel="stylesheet" type="text/css" href="http://h5cdn.wisdomtmt.com/common/util/tmt-table/tmt-table-theme/bootstrap.min.css"/>'); 
  $('head').append(link); 
  //當CSS加載完成才顯示組件 
  var judgeCssLoad = setInterval(function() { 
    if (link[0].sheet) {
       __this.isShow = true; clearInterval(judgeCssLoad); 
    } 
  }, 30) 

//處理父組件傳入的數據
  __this.loadData(); 
}

組件內部定義了兩個方法：

changePage和loadData;

changePage(currentPage) { 
  //父組件和pagination是雙向綁定，因此改變pagination的值，父組件能夠接收到
  this.$set("pagination", currentPage); 
  this.currentPage = currentPage; 
}

loadData() { 
  var __this = this; 
  //判斷外部的data數據是否傳入,進行分頁初始化和綁定事件 
  var tableData = __this.options.data; 
  //由於父組件傳入的數據有延遲，因此設定200ms的延遲執行
  setTimeout(function() { 
    //拿到父組件傳入的數據才執行分頁和綁定事件
    if (tableData) { 
      //初始化分頁
      __this.pageNum = Math.ceil(tableData.total_num / tableData.limit); 
      //綁定事件，經過jQuery的on方法進行綁定
      if (__this.options.fn) { 
        var fn = __this.options.fn, 
            keys = Object.keys(fn); 
        for (let i = 0; i < keys.length; i++) { 
            var tempArr = keys[i].split(' '); 
            //先解綁再綁定，防止重複綁定
            $(tempArr[0]).unbind(); 
            $(tempArr[0]).on(tempArr[1], function() {
            setTimeout(fn[keys[i]], 50); 
            }); 
          } 
        } 
      } else { 
      //若是沒有拿到數據，就再執行一遍
        __this.loadData(); 
      } 
    }, 200); }

組件的watch屬性監聽了兩個變量：

options和pagination:

watch: { 
  //監聽當options發生變化時，重載數據
  'options': {
     handler: function(val, oldVal) { 
      this.loadData(); 
    }, 
    deep: true 
  }, 
  //當前頁發生改變時，通知父組件
  'pagination': {
     handler: function(val, oldVal) { 
      this.currentPage = val; 
      } 
    } 
}

最後把tmtTable組件註冊到Vue的全局變量上，並在控制檯通知組件加載完畢：

Vue.component('tmtTable', tmt_table); 
console.log('tmtTable component ready!');