vue.js中smart-table基础篇

第一步 分析

产品里面的table要满足如下功能：
固定的头部
按照头部列内容排列一行一行的展示数据
table需要实现分页查询
table可以根据条件查询内容
我们开发肯定知道源数据可能是1、2这种key，需要用数据字典把key转化为说明文字
特殊的操作列，内容是按钮，并且能触发动作
仔细想想，其实还有:
设置列的宽度
设置列的text-align
点击列的title排序table
其他

第二步 动手做

想再多，不去动手做肯定不行。切忌考虑太多，不需要考虑清楚怎么实现去所有功能，只需要按照你的思路往下做就好。往往做的过程中会有更好的idea，困难总能解决的。
开发业务的同时给table组件添加子功能，最终实现了上面所有功能。（ps: 代码在内网，不方便拿出来）
第三步 反思
虽然这个table组件能简单轻松实现业务需求，但是它还是有一些问题：
数据字典过滤器和table过滤器在filter目录，功能上没有高内聚，跟工程目录结构有耦合
ajax请求配置跟api模块是有耦合的
配置是通过rule对象传入table组件，很长很长的一个json对象
这样的table组件怎么拿出来开源！它不是我理想中的table组件。我想要一个高内聚完全独立的table组件，我想要一个语义化的table组件。在我眼里table组件应该长这个样子：

抛弃使用json对象而使用column结构配置table的话面临一个问题，如何把column结构转化为json对象，并且传递给table组件？
思考了一番，有一个办法，使用Vue的Slot功能将column组件分发到table组件里面，然后在table组件通过遍历子组件column拿到它的配置。我们来看一下column的实现：

在table组件中拿到column配置：

//这是table组件的ready事件钩子
ready: function () {
    var _this = this;
    this.$children.forEach(function (child) {
        //把column的配置整合到rule中
        var obj = {};
        for(var p in child._props){
            obj[p] = child[p]
        }
        _this.rule.push(obj)
    })
},

语义化的问题完美解决，哈哈！

在开发过程又遇到一个问题：我希望column中prop项的值可以是string，可以是对象，可以是数组，还可以是类对象String。至于为什么，稍后说明配置项action和filter就知道了。
解决这个问题的思路是把类对象string转化了标准JSON格式的string，然后parse。解决方案如下：

function parseText(str){
    if(str.startsWith("{") || str.startsWith("[")){
        //应该有更高效的，献丑
        str = str.replace(/'/g, "\"");
        str = str.replace(/(\s?\{\s?)(\S)/g, "$1"+"\""+"$2");
        str = str.replace(/(\s?,\s?)(\S)/g, "$1"+"\""+"$2");
        str = str.replace(/(\S\s?):(\s?\S)/g, "$1"+"\":"+"$2");
        str = str.replace(/,"\{/g, ",{");
        str = str.replace(/""/g, "\"");
        str = str.replace(/\s/g, "");
        try{
            str = JSON.parse(str)
        }catch(e){
        }
    }
    return str;
}
第四步 完成初版
由于精力有限，先开发一个基础版，包含如下功能：
固定的头部
按照头部列内容排列一行一行的展示数据
用数据字典把key转化为说明文字
特殊的操作列，内容是按钮，并且能触发动作
设置列的宽度
设置列的text-align

下面是table组件源代码：

我称呼它为vue-smart-table

配置详解

配置项：

data-key ： 数据的key，定义这一列显示数据对象哪一个属性的值
name ： 定义列的title名称
align ： 定义列文字排列方向，可选center、left（默认）、right
width ： 定义列的宽度
filter ： 定义列的过滤器，可以是过滤器函数的名称，可以是数组[{key:1,value:’哈哈’}]，也可以是类对象数组”[{key:1,value:’哈哈’}]”

//这里是table的父组件，使用table的地方
data: function(){
    return {
        haha : []
    }
}
ready: function () {
    var _this = this;
    setTimeout(function () {
        _this.haha.push({
            key : 1,
            value : "星期一"
        })
        _this.haha.push({
            key : 2,
            value : "星期二"
        })
    },1000)
}

filter的值可以是异步拿到的，拿到之后会执行转换动作，非常好用！！！vue实在是好用！！
action ： 定义特殊的操作列，可以是对象和数组，也可以是类对象string。类对象string的话回调属性func的值是父组件的methods中的函数名。
data ： 源数据list
事件：
th-col-click ：点击列的头部触发，事件参数是 列的配置对象
body-tr-click ：点击table的body触发，事件参数是 行的原始数据值
func ：特殊操作触发， 事件参数是 行的原始数据值