vue3封装el-table组件

Vue3中封装`el-table`组件是一种常见的做法，它可以帮助我们将复杂的数据展示逻辑抽取出来，提高代码的复用性和维护性。以下是基本步骤：

1. 引入依赖：首先需要引入Element UI库，特别是`<el-table>`组件。

import { Table } from 'element-ui';

2. 定义组件结构：创建一个自定义组件，通常命名为`MyTable`，接收props如data、columns等，并将它们传递给el-table。

export default {
  name: 'MyTable',
  props: {
    data: {
      type: Array,
      required: true,
    },
    columns: {
      type: Array,
      default: () => [
        // 默认列配置...
      ],
    },
  },
  components: {
    ElTable,
  },
  template: `
    <el-table :data="data" :columns="columns">
      <!-- 表格内容 -->
    </el-table>
  `,
};

3. 实现功能：你可以处理一些事件处理函数，比如行点击事件、单元格编辑等。

methods: {
  handleRowClick(row) {
    console.log('row clicked:', row);
  },
},

4. 使用组件：在其他组件中，只需传入数据和列配置即可。

<template>
  <MyTable :data="tableData" :columns="tableColumns" @row-click="handleRowClick"></MyTable>
</template>

<script>
import MyTable from '@/components/MyTable.vue';

export default {
  components: {
    MyTable,
  },
  data() {
    return {
      tableData: ...,
      tableColumns: ...,
    };
  },
  methods: {
    handleRowClick(row) {
      // 处理点击事件
    },
  },
};
</script>