如何避免重复性地作数据维护页面？

做为一枚作后台管理系统的前端，除了羡慕作移动端或小程序的同行，就是常常被要求作一个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是一个函数，须要执行再传入。

到这里，其实只是知足了最最基本的数据展现，还有许多功能并未实现，好比数据行的选择之类的。以后的实现会加入分页与表单！

如有写的很差的地方，欢迎指出！