Vue3 + Element Plus 封装公共表格组件（带源码）

<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 === 'selection'"
        type="selection"
        :label="column.label"
      ></el-table-column>
      <el-table-column
        v-else
        :prop="column.prop"
        :label="column.label"
      ></el-table-column>
    </template>
  </el-table>
</template>
 
<script>
export default {
  name: 'CommonTable',
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

这个代码实例展示了如何在Vue 3和Element Plus中封装一个带有列定义和数据的公共表格组件。组件接收columns和tableData作为props，并使用v-bind="$attrs"和v-on="$listeners"来接收并传递除了columns和tableData之外的所有props和事件监听器。这样做可以使得该组件更加灵活，可以接受任何el-table支持的属性和事件。