如何避免重复性地做数据维护页面？_Codeeeee的专栏文章_微信文章

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

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

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