vue table树形数据 多选，分页多选留存, 实现逻辑

如上图所示，vue table 的多选是不能选中子级的。上面是我重写后的效果。

实现逻辑有很多种，我直接使用checkbox 组件。

以下只写出实现逻辑，具体的数据结构，不赘述了，直接抄官网即可

1. 首列直接显示全选checkbox，以及每列开头的checkbox

<template><el-table-column prop="id" label="全选" width="120"><template slot="header"><el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox></template><template slot-scope="scope"><el-checkbox v-model="scope.row.isSelect" @change="(checked) => handleChecked(checked, scope.row)">{{scope.row.id }}</el-checkbox></template></el-table-column>
</template>

2. js 实现逻辑

• 获取树形数据，遍历，添加是否选中的字段。目的是重新加载列表，已选中的渲染
• 处理全选，单独选中，取消的逻辑。主要的是，不管是全选和单个选中，都需要处理子级数据。
• 处理选中时，有保存选中的逻辑，方便分页后，能正常渲染已选中。
• 我的树形只有二级，处理子级时，直接就遍历了，如果大家是多级，需要自己优化成 递归写法。正常够用

<script>
export default {data() {return {tableData: [],select_row: [],selectData: [],};},methods: {getList() {this.loading = true;orderWorkList({page: this.pageParam.page,perPage: this.pageParam.size,}).then((res) => {let tableData = res.data.list;//添加一个是否选中的属性tableData.forEach((item, index) => {item.isSelect = this.select_row && this.select_row.indexOf(item.id) > -1 ? true : false;if (item.child_many && item.child_many.length > 0) {item.child_many.map(itemChild => {itemChild.isSelect = this.select_row && this.select_row.indexOf(itemChild.id) > -1 ? true : false;return itemChild;});}});this.loading = false;});},//全选handleCheckAllChange(checked) {this.tableData.forEach(item => {item = this.handleSelect(item, checked)});},//单选每条handleChecked(checked, row) {this.handleSelect(row, checked)this.handleParentChecked(row);//this.saveCheckdata();},//checkbox选中处理子级handleSelect(row, checked) {row.isSelect = checked ? true : false;this.saveCheckdata(row);if (row.child_many && row.child_many.length > 0) {row.child_many.forEach(itemChild => {itemChild.isSelect = checked ? true : false;this.saveCheckdata(itemChild);return itemChild;});}return row;},//保存选择的数据saveCheckdata(item) {if (item.isSelect) {this.selectData.push(item);} else {let index = this.selectData.findIndex(row => row.id == item.id);if (index > -1) {this.selectData.splice(index, 1);}}},//当所有子节点取消选中，父节点也要取消选中；当所有子节点已选中，父节点也要相应选中handleParentChecked(row) {this.tableData.forEach(item => {if (item.child_many && item.child_many.length > 0 && row.fid == item.id) {let rowParentFlag = true;item.child_many.forEach(itemChild => {rowParentFlag = itemChild.isSelect && rowParentFlag;});item.isSelect = rowParentFlag;return item;}});},}
}
</script>

逻辑很简单，说白了就是玩数据。

选中父级，然后处理子级状态。

子级数据变动后，然后看看父级是否有影响。

遇到了，我就写下，供大家参考参考。欢迎大家评论，留言。