作为一枚做后台管理系统的前端，除了羡慕做移动端或小程序的同行，就是经常被要求做一个XX的维护页面！
这不，这周PO又说：小X啊，给系统做个手机号归属地的维护页面吧！
什么是维护页面？就是无聊透顶的增删改查页面呗！
反正有现成的UI框架，然后就是对着文档写一些自定义标签、配置下属性、通过后端给的接口获取数据填充上...
因此，基本的维护页面组件大致是这个样子：
<template>
<div>
<el-table :data="tableData">
<el-table-column prop="key1" label="value2"></el-table-column>
<el-table-column prop="key2" label="value2"></el-table-column>
...
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="handleEdit">编辑</el-button>
<el-button @click="handleDel">删除</el-button>
</template>
</el-table-column>
</div>
</template>
最终呈现的页面：
但是，这次终于爆发了，不想再做这种重复性工作了！（当然不是拒绝不做）
想着，要是通过配置JSON，直接生成页面就好了！
寻思着，对Element-UI的Tabel组件再做一层封装！
最终，只要配置以下JSON参数，就可以自动生成需要的页面：
const options = {
table: {
columns: [
{
prop: 'value1',
label: 'key1'
},
{
prop: 'value2',
label: 'key2'
}
],
handle: getData
}
};
这是最基本的配置，但Element-UI的Table组件本身还支持很多配置参数，这些配置若也在JSON中，也要正常作用。因此，template模板写法并不适用，或者说自由度不高，所以采用了JSX的写法：
export default {
props: {
options: Object
},
data() {
return {
tableData: []
};
};
render(h) {
const tpl = <div></div>;
const tableTpl = <el-table data={ this.tableData }></el-table>;
const options = this.options;
const componentOptions = tableTpl.componentOptions;
// 遍历传入的属性，配置在原生的Element Table组件上
(let option in options.table) {
componentOptions.propsData[option] = options.table[option];
}
options.table.columns.forEach(column => {
const columnTpl = <column options={ column }></column>;
componentOptions.children.push(columnTpl);
});
tpl.children.push(tableTpl);
return tpl;
},
methods: {
getData() {
const options = this.options;
const params = {};
options.handle && options.handle(params).then(res => {
if (res.status === 0) {
this.tableData = res.result.Body;
}
});
}
},
created() {
this.getData();
}
}
根元素用div，而不直接用el-table，是方便为了以后加入分页与表单筛选。
其实，表格的最后一列，虽然作为维护页面基本就是编辑与删除，但也不保证没有变动！需求这种东西谁知道呢。因此，将最后一列的内容与逻辑都抛出来，不放在组件里实现，但要保证其拥有原先的作用域。这里，就需要借助vue的作用域插槽，比如我们是这么使用组件的：
<custom-table :options="options">
<template slot-scope="scope">
<el-button size="small" type="text" @click="handleClick(scope)">编辑</el-button>
</template>
</custom-table>
这里的点击事件处理方法的参数scope，就是原生el-table-column组件的作用域，即 scope = { row, column, $index }。
因此，需要对el-table-column也做一层封装：
components: {
Column: {
props: {
options: Object
},
render(h) {
const tpl = <el-table-column ></el-table-column>;
const options = this.options;
const componentOptions = tpl.componentOptions;
for (let option in options) {
if (option === 'slot') {
const slot = this.$parent.$parent.$scopedSlots.default;
tpl.data['scopedSlots'] = {
default: scope => {
return [slot(scope)];
}
};
}
else {
componentOptions.propsData[option] = options[option];
}
}
return tpl;
}
}
这里要注意，获取的slot是一个函数，需要执行再传入。
到这里，其实只是满足了最最基本的数据展示，还有许多功能并未实现，比如数据行的选择之类的。之后的实现会加入分页与表单！
若有写的不好的地方，欢迎指出！
