一文全面解析 Vue3 el-table 组件二次封装

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <template v-for="column in columns">
      <el-table-column
        :key="column.prop"
        v-bind="column"
      >
      </el-table-column>
    </template>
  </el-table>
</template>
 
<script>
export default {
  name: 'MyTable',
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

这个代码示例展示了如何使用Vue 3和Element Plus UI框架中的el-table组件进行二次封装。MyTable组件接收columns和tableData作为props，并通过v-bind="$attrs"和v-on="$listeners"将父组件中的非 prop 特性和监听事件绑定到el-table上。这样做可以使组件更加通用和灵活。