el-table 嵌套封装使用

**嵌套表格组件 el-table 的使用**

在实际开发中，我们经常需要展示复杂的数据结构，例如多层级别的分类、关联数据等。在这种情况下，单独使用 `el-table` 组件可能无法满足需求。因此，我们需要嵌套封装 `el-table` 组件，以便更好地展示和管理这些复杂数据。

**第一种方式：表格嵌套**

我们可以通过在表格中嵌套另一个表格来实现这一点。这种方法适用于数据结构比较简单的情况，例如多层级别的分类。

html<template>
 <div>
 <el-table :data="tableData" style="width:100%">
 <el-table-column prop="name" label="Name"></el-table-column>
 <el-table-column prop="age" label="Age"></el-table-column>
 <el-table-column label="Operation">
 <template slot-scope="scope">
 <div v-if="scope.row.children.length >0">
 <el-table :data="scope.row.children" style="width:100%">
 <el-table-column prop="name" label="Name"></el-table-column>
 <el-table-column prop="age" label="Age"></el-table-column>
 </el-table>
 </div>
 </template>
 </el-table-column>
 </el-table>
 </div>
</template>

<script>
export default {
 data() {
 return {
 tableData: [
 {
 name: 'John',
 age:25,
 children: [
 { name: 'Alice', age:22 },
 { name: 'Bob', age:28 }
 ]
 },
 {
 name: 'Mary',
 age:30,
 children: []
 }
 ]
 };
 }
};
</script>

在上面的例子中，我们定义了一个 `tableData` 数组，其中每个对象都有一个 `children` 属性，用于存储子级别的数据。然后，在表格的最后一列中，我们使用 `v-if` 指令来判断当前行是否有子级别数据。如果有，则显示嵌套的表格。

**第二种方式：表格分组**

我们可以通过在表格中添加一个分组功能，来实现这一点。这种方法适用于数据结构比较复杂的情况，例如多层级别的分类和关联数据。

html<template>
 <div>
 <el-table :data="tableData" style="width:100%">
 <el-table-column prop="name" label="Name"></el-table-column>
 <el-table-column prop="age" label="Age"></el-table-column>
 <el-table-column label="Operation">
 <template slot-scope="scope">
 <div v-if="scope.row.children.length >0">
 <el-table :data="scope.row.children" style="width:100%">
 <el-table-column prop="name" label="Name"></el-table-column>
 <el-table-column prop="age" label="Age"></el-table-column>
 </el-table>
 </div>
 </template>
 </el-table-column>
 </el-table>
 </div>
</template>

<script>
export default {
 data() {
 return {
 tableData: [
 {
 name: 'John',
 age:25,
 children: [
 { name: 'Alice', age:22 },
 { name: 'Bob', age:28 }
 ]
 },
 {
 name: 'Mary',
 age:30,
 children: []
 }
 ]
 };
 }
};
</script>

在上面的例子中，我们定义了一个 `tableData` 数组，其中每个对象都有一个 `children` 属性，用于存储子级别的数据。然后，在表格的最后一列中，我们使用 `v-if` 指令来判断当前行是否有子级别数据。如果有，则显示嵌套的表格。

**第三种方式：表格分页**

我们可以通过在表格中添加一个分页功能，来实现这一点。这种方法适用于数据结构比较复杂的情况，例如多层级别的分类和关联数据。

html<template>
 <div>
 <el-table :data="tableData" style="width:100%">
 <el-table-column prop="name" label="Name"></el-table-column>
 <el-table-column prop="age" label="Age"></el-table-column>
 <el-table-column label="Operation">
 <template slot-scope="scope">
 <div v-if="scope.row.children.length >0">
 <el-pagination :page-count="10"
 layout="prev, pager, next"
 @current-change="handleCurrentChange"
 ></el-pagination>
 </div>
 </template>
 </el-table-column>
 </el-table>
 </div>
</template>

<script>
export default {
 data() {
 return {
 tableData: [
 {
 name: 'John',
 age:25,
 children: [
 { name: 'Alice', age:22 },
 { name: 'Bob', age:28 }
 ]
 },
 {
 name: 'Mary',
 age:30,
 children: []
 }
 ],
 currentPage:1 };
 },
 methods: {
 handleCurrentChange(val) {
 this.currentPage = val;
 }
 }
};
</script>

在上面的例子中，我们定义了一个 `tableData` 数组，其中每个对象都有一个 `children` 属性，用于存储子级别的数据。然后，在表格的最后一列中，我们使用 `v-if` 指令来判断当前行是否有子级别数据。如果有，则显示嵌套的表格。

**总结**

在本文中，我们讨论了三种方式来实现嵌套封装 `el-table` 组件：表格嵌套、表格分组和表格分页。每种方式都适用于不同的场景，例如多层级别的分类、关联数据等。在实际开发中，可以根据具体需求选择合适的方法来实现嵌套封装 `el-table` 组件。