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!');