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