如何二次封装一个el-table组件并二次复用

**二次封装 El Table 组件并二次复用**

在实际的开发中，我们经常会遇到一些重复性的表格展示需求，例如显示数据列表、编辑表单等。在这种情况下，我们可以使用 Element UI 提供的 `el-table` 组件来实现这些功能。但是，如果我们需要对原有的 `el-table` 进行二次封装和二次复用，那么就需要进行一些额外的工作。

本文将介绍如何二次封装一个 `el-table` 组件，并二次复用它。我们将使用 Vue.js 作为开发框架，Element UI 作为 UI 库。

### 一、创建一个新的组件首先，我们需要创建一个新的 Vue 组件来进行二次封装。假设我们命名这个组件为 `MyTable`。

html<!-- MyTable.vue -->
<template>
 <div>
 <!-- 我们将在这里插入 el-table 组件 -->
 </div>
</template>

<script>
export default {
 name: 'MyTable',
 // 我们需要定义一些属性和方法来进行二次封装};
</script>

javascript// MyTable.vueexport default {
 name: 'MyTable',
 props: {
 columns: Array, // 表格列结构 data: Array, // 表格数据源 },
 methods: {
 // 我们可以定义一些方法来进行二次封装 },
};

html<!-- MyTable.vue -->
<template>
 <div>
 <!-- 我们将在这里插入 el-table 组件 -->
 <el-table :data="data" :columns="columns">
 <!-- 我们可以定义一些列结构和数据源 -->
 </el-table>
 </div>
</template>

<script>
import ElTable from 'element-ui/lib/table';
export default {
 name: 'MyTable',
 props: {
 columns: Array, // 表格列结构 data: Array, // 表格数据源 },
 components: { ElTable }, // 我们需要注册 el-table 组件};
</script>

html<!-- MyList.vue -->
<template>
 <div>
 <!-- 我们将在这里插入 MyTable 组件 -->
 <my-table :columns="listColumns" :data="listData"></my-table>
 </div>
</template>

<script>
import MyTable from './MyTable';
export default {
 name: 'MyList',
 components: { MyTable },
 data() {
 return {
 listColumns: [], // 表格列结构 listData: [], // 表格数据源 };
 },
};
</script>