el-table树形表格实现复选框多选效果

**树形表格实现复选框多选效果**

在实际的开发中，我们经常需要实现复杂的数据展示和操作功能。其中，树形表格是其中一种常见的需求。在本文中，我们将介绍如何使用 `el-table` 实现树形表格，并且支持复选框多选效果。

### 一、基本结构首先，我们需要定义一个基本的树形表格结构。我们可以使用 `el-table` 组件来实现这一点。

html<template>
 <div>
 <el-table :data="tableData" style="width:100%" @selection-change="handleSelectionChange">
 <!-- 表头 -->
 <el-table-column type="selection" width="55"></el-table-column>
 <!-- 树形结构的列 -->
 <el-table-column label="树形结构" prop="treeStructure" width="200"></el-table-column>
 </el-table>
 </div>
</template>

<script>
export default {
 data() {
 return {
 tableData: [
 // 表格数据 ]
 }
 },
 methods: {
 handleSelectionChange(val) {
 console.log(val)
 }
 }
}
</script>

html<template>
 <div>
 <el-table :data="tableData" style="width:100%" @selection-change="handleSelectionChange">
 <!-- 表头 -->
 <el-table-column type="selection" width="55"></el-table-column>
 <!-- 树形结构的列 -->
 <el-table-column label="树形结构" prop="treeStructure" width="200">
 <template slot-scope="scope">
 <span v-if="!scope.row.children">{{ scope.row.treeStructure }}</span>
 <div v-else>
 <el-checkbox :indeterminate="scope.row.isIndeterminate" @change="handleCheckAllChange(scope.row)" v-model="scope.row.checkAll"></el-checkbox>
 <ul class="tree-list">
 <li v-for="(item, index) in scope.row.children" :key="index">
 {{ item.treeStructure }}
 <span v-if="item.children.length >0">({{ item.children.length }})</span>
 <div v-if="item.children.length >0">
 <el-checkbox @change="handleCheckChange(scope.row, index)" v-model="scope.row.children[index].checkAll"></el-checkbox>
 <ul class="tree-list">
 <li v-for="(grandChild, grandChildIndex) in item.children" :key="grandChildIndex">
 {{ grandChild.treeStructure }}
 <span v-if="grandChild.children.length >0">({{ grandChild.children.length }})</span>
 <!-- ... -->
 </li>
 </ul>
 </div>
 </li>
 </ul>
 </div>
 </template>
 </el-table-column>
 </el-table>
 </div>
</template>

<script>
export default {
 data() {
 return {
 tableData: [
 // 表格数据 ]
 }
 },
 methods: {
 handleSelectionChange(val) {
 console.log(val)
 },
 handleCheckAllChange(row) {
 row.children.forEach((item, index) => {
 item.checkAll = row.checkAll if (item.children.length >0) {
 item.children.forEach((grandChild, grandChildIndex) => {
 grandChild.checkAll = row.checkAll })
 }
 })
 },
 handleCheckChange(row, index) {
 row.children[index].checkAll = !row.children[index].checkAll if (row.children[index].children.length >0) {
 row.children[index].children.forEach((grandChild, grandChildIndex) => {
 grandChild.checkAll = row.children[index].checkAll })
 }
 }
 }
}
</script>

html<template>
 <div>
 <el-table :data="tableData" style="width:100%" @selection-change="handleSelectionChange">
 <!-- 表头 -->
 <el-table-column type="selection" width="55"></el-table-column>
 <!-- 树形结构的列 -->
 <el-table-column label="树形结构" prop="treeStructure" width="200">
 <!-- ... -->
 </el-table-column>
 </el-table>
 </div>
</template>

<script>
export default {
 data() {
 return {
 tableData: [
 // 表格数据 ]
 }
 },
 methods: {
 handleSelectionChange(val) {
 console.log(val)
 },
 handleCheckAllChange(row) {
 row.children.forEach((item, index) => {
 item.checkAll = row.checkAll if (item.children.length >0) {
 item.children.forEach((grandChild, grandChildIndex) => {
 grandChild.checkAll = row.checkAll })
 }
 })
 },
 handleCheckChange(row, index) {
 row.children[index].checkAll = !row.children[index].checkAll if (row.children[index].children.length >0) {
 row.children[index].children.forEach((grandChild, grandChildIndex) => {
 grandChild.checkAll = row.children[index].checkAll })
 }
 }
 }
}
</script>