vue2.0使用render函数对el-table表格再封装

在用el-table的时候， 用一个数组进行循环就可以了，但是当我们需要对某一列的数据进行二次处理就会用，那么就不能进行循环了，就需要在模版中一个一个的写，造成模版的代码量大，所以我就对el-table进行了二次封装

// 这是table.vue文件
<script>
export default {
  name: "GTable",
  props: {
    serialNumber: { type: Boolean, default: true }, // 是否展示序号列
    columns: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      dataList: [],
      pageInfo: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        pages: 1
      }
    };
  },
  methods: {
    setIndex(index) {
      const { pageNum, pageSize } = this.pageInfo;
      return index + 1 + (pageNum - 1) * pageSize;
    }
  },
  render() {
    const { dataList } = this.$data;
    const { serialNumber, columns } = this.$props;
    // 渲染序号
    const columnNumber = serialNumber ? (
      <el-table-column
        type="index"
        width="120"
        label="序号"
        index={this.setIndex}
        align="center"
      />
    ) : null;
    // 渲染列的
    const renderColumn = () => {
      return columns.map(item => {
        const attribute = {
          key: item.label,
          attrs: { ...item }
        };
        // 这里使用的就是作用域插槽
        if (item.customRender) {
          attribute.scopedSlots = {
            default: this.$scopedSlots[item.customRender]
          };
        }
        return <el-table-column {...attribute} />;
      });
    };
    const rendeRempty = (
      <template slot="empty">
        <no-data></no-data>
      </template>
    );

    // 渲染表格
    const renderTable = (
      <el-table data={dataList} style="width: 100%">
        {columnNumber}
        {renderColumn()}
        {rendeRempty} //这个是无数据时表格的显示组件
      </el-table>
    );
    return <div class="g-table">{renderTable}</div>;
  }
};
</script>

在页面中使用table组件，table组件我全局注册了。

<template>
  <g-table :columns="columns">
    <template slot="operation" slot-scope="scope">
    	<!--可以对列的内容就行处理  -->
        {{ scope.row }}
      </template>
  </g-table>```
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          label: "姓名",
          prop: "name"
        },
        {
          label: "手机号",
          prop: "mobile"
        },
        {
          label: "用户名",
          prop: "username"
        },
        {
          label: "操作",
          customRender: "operation" // 这里就和上面的slot属性一样。
        }
      ],
      dialogFormVisible: false
    };
  },
}
</script>