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

作为一枚做后端管理系统的前台，除了羡慕做手机端或者小程序的同行，就是经常被要求做一个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>

最终呈现的页面：

image.png

但是，这次终于爆发了，不想再做这种重复性工作了！（当然不是拒绝不做）
想着，要是通过配置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是一个函数，需要执行再传入。

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

若有写的不好的地方，欢迎指出！