Vue3 ElementPlus 二次封装常用表格展示组件

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <template v-for="column in columns" :key="column.prop">
      <el-table-column
        v-if="column.type === 'index'"
        type="index"
        :label="column.label"
      ></el-table-column>
      <el-table-column
        v-else-if="column.type === 'normal'"
        :prop="column.prop"
        :label="column.label"
      ></el-table-column>
      <!-- 其他类型的列定义可以在这里添加 -->
    </template>
  </el-table>
</template>
 
<script>
export default {
  name: 'CommonTable',
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    columns: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

这个代码示例展示了如何使用Vue3和ElementPlus来创建一个二次封装的表格组件，该组件可以接收表格数据和列配置作为属性。它使用了v-bind="$attrs"和v-on="$listeners"来确保父组件的属性和监听器能够传递给表格组件，从而使得该组件更加通用和灵活。