️️️Vue3+Element-Plus二次封装一个可定制化的table组件

<template>
  <el-table
    :data="tableData"
    border
    fit
    highlight-current-row
    :header-cell-style="headerCellStyle"
    @selection-change="handleSelectionChange"
    @row-click="handleRowClick"
  >
    <el-table-column
      v-if="selection"
      type="selection"
      width="55"
    />
    <el-table-column
      v-if="index"
      type="index"
      width="50"
    />
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :sortable="column.sortable"
      :formatter="column.formatter"
    />
    <slot />
  </el-table>
</template>
 
<script>
export default {
  name: 'CustomTable',
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    },
    selection: {
      type: Boolean,
      default: false
    },
    index: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    headerCellStyle({ column }) {
      if (column.property === 'name') {
        return 'color: red;';
      }
    },
    handleSelectionChange(selection) {
      this.$emit('selection-change', selection);
    },
    handleRowClick(row, column, event) {
      this.$emit('row-click', row, column, event);
    }
  }
};
</script>

这个代码实例展示了如何创建一个可定制的Vue 3组件，它封装了Element Plus的el-table组件。该组件接受tableData、columns、selection和index等props，并且可以通过slot插槽来添加额外的列或操作按钮。同时，它还定义了headerCellStyle方法来自定义表头单元格的样式，以及handleSelectionChange和handleRowClick方法来处理复选框选择变化和行点击事件。这个组件可以作为一个基础的表格组件来使用，可以根据具体需求进行扩展和修改。