【Vue3】el-table 组件二次封装，看这一篇就够了

<template>
  <el-table
    :data="tableData"
    border
    fit
    highlight-current-row
    style="width: 100%;"
    @selection-change="handleSelectionChange"
    @row-click="handleRowClick"
  >
    <el-table-column
      type="selection"
      width="55"
    />
    <el-table-column
      prop="date"
      label="日期"
      width="180"
    />
    <el-table-column
      prop="name"
      label="姓名"
      width="180"
    />
    <el-table-column
      prop="address"
      label="地址"
    />
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '李小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }],
      multipleSelection: []
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleRowClick(row, column, event) {
      // 处理行点击事件
    }
  }
};
</script>

这个简单的例子展示了如何在Vue 3中使用Element Plus UI框架的el-table组件进行二次封装。它包括了表格的基本属性设置、数据绑定和事件处理。这个例子可以作为封装自定义表格组件的起点。