Vue+Elementui el-table组件二次封装

在Vue中使用Element UI的el-table组件时，可以通过二次封装来提高复用性和可读性。以下是一个简单的el-table二次封装的例子：

首先，创建一个封装组件BaseTable.vue：

<template>
  <el-table
    :data="tableData"
    border
    fit
    highlight-current-row
  >
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :sortable="column.sortable"
    ></el-table-column>
  </el-table>
</template>
 
<script>
export default {
  name: 'BaseTable',
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    columns: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

然后，在父组件中使用封装的BaseTable组件：

<template>
  <BaseTable :tableData="data" :columns="columns" />
</template>
 
<script>
import BaseTable from './BaseTable.vue';
 
export default {
  components: {
    BaseTable,
  },
  data() {
    return {
      data: [
        // ... 数据项
      ],
      columns: [
        { label: '姓名', prop: 'name', sortable: true },
        { label: '年龄', prop: 'age', sortable: false },
        // ... 更多列配置
      ],
    };
  },
};
</script>

在这个例子中，BaseTable组件接受tableData和columns两个prop，tableData用于提供表格数据，columns用于定义表格列的配置。父组件通过传递这些prop来控制表格的显示内容。这样，无论何种表格，只需要在父组件中调整数据和列配置即可。