vue3 封装el-table

在 Vue3 中，封装 Element UI 的表格组件 `el-table` 可以帮助我们更好地管理和复用表单组件，并提高开发效率。以下是封装的一个基础示例：

首先，安装依赖：

npm install element-ui@latest

然后，在项目中创建一个自定义的 Table 组件，如 `CustomTable.vue`：

<template>
  <div>
    <el-table :data="tableData" :columns="columns">
      <!-- 通过props接收数据和列配置 -->
      <template v-for="(column, index) in columns" :key="index">
        <el-table-column :prop="column.property" :label="column.label" :width="column.width"></el-table-column>
      </template>
    </el-table>
    <button @click="addRow">添加行</button> <!-- 添加按钮实例 -->
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';

export default {
  props: {
    // 接收外部传入的数据
    tableData: {
      type: Array,
      required: true
    },
    // 接收外部传入的列配置
    columns: {
      type: Array,
      required: true
    }
  },
  components: {
    ElTable,
    ElTableColumn
  },
  methods: {
    addRow() {
      this.tableData.push({ /* 新增数据结构 */ });
    }
  }
};
</script>

在这个例子中，我们使用了 Vue 的 `ref` 和 `setup` 特性，以及 Element Plus 的 `ElTable` 和 `ElTableColumn`。通过将列配置和数据作为 props 传递给组件，可以在父组件中动态地设置它们。