简化表格渲染，提高效率：使用render函数二次封装el-table

2023-10-04 14:10:00

前言

在现代前端开发中，表格是一种常用的组件，它可以用来显示和管理大量数据。Element UI库提供了el-table组件，它是一个功能强大的表格组件，可以满足各种各样的需求。然而，在实际开发中，我们经常需要对el-table进行二次封装，以满足特定需求。

代码

props部分

export default {
  props: {
    tableColumn: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
  },
};

render部分

render() {
  return (
    <el-table
      :data="tableData"
      :columns="tableColumn"
      border
      style="width: 100%"
    >
      <template v-for="item in tableColumn" :key="item.prop">
        <el-table-column :prop="item.prop" :label="item.label"></el-table-column>
      </template>
    </el-table>
  );
}

methods部分

methods: {
  // 省略其他方法
},

用法

基础用法

<template>
  <MyTable
    :table-column="tableColumn"
    :table-data="tableData"
  />
</template>

<script>
import MyTable from './MyTable.vue';

export default {
  components: { MyTable },
  data() {
    return {
      tableColumn: [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' },
        { prop: 'address', label: '地址' },
      ],
      tableData: [
        { name: 'John', age: 30, address: '北京' },
        { name: 'Mary', age: 25, address: '上海' },
        { name: 'Bob', age: 35, address: '广州' },
      ],
    };
  },
};
</script>

效果

<el-table
  :data="tableData"
  :columns="tableColumn"
  border
  style="width: 100%"
>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>