Table Tree table combined with multiple select tables
Fault 1: All children are selected. The parent is not automatically selected
Fault 2: The parent level does not automatically select all the children
Problem 3: In figure 2, the child is unselected, but the parent is not automatically unselected
And the current sub-level secondary tree operation
The source code
<template> <div class="warning-individual-container"> <div class="container"> <div> <el-table :data="tableData" style="width: 100%; margin-bottom: 20px;" row-key="id" ref="multipleTable" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}" @select="rowSelect" @select-all="selectAll" > <el-table-column type="selection" Width ="55"></el-table-column> <el-table-column prop="date" label=" date" width="180"></el-table-column> <el-table-column Width ="180"></el-table-column> <el-table-column prop="address" label=" address" ></el-table-column> </el-table> </div> </div> </div> </template> <script lang="ts"> import { toRefs, reactive, onBeforeMount, getCurrentInstance } from 'vue'; import dayjs from 'dayjs'; import { nextTick } from 'vue'; export default { name: 'warningIndividual', components: {}, setup() { const { proxy } = getCurrentInstance() as any; Const state = reactive({form: {}, tableData: [{id: 1, date: '2016-05-02', date: '2016-05-02', address: Date: '2016-05-04', name: 'wang Xiaohu ', address:' 1517 Jinshajiang Road, Putuo District, Shanghai ',}, {id: 3, date: '2016-05-01', name: 'Wang Xiaohu ', address:' 1519 Jinshajiang Road ', Children: [{id: 31, Date: '2016-05-01', name: 'Wang Xiaohu ', address:' 1519 Jinshajiang Road ', Children: [{id: 31, Date: '2016-05-01', name: 'wang Xiaohu ', address:' 1519 Jinshajiang Road, Putuo District, Shanghai ',}, {id: 32, date: '2016-05-01', name: 'Wang Xiaohu ', address: '1519 Jinshajiang Road, Putuo District, Shanghai ',},],}, {id: 4, date: '2016-05-03', name:' Wang Xiaohu ', address: },], multipleTables: undefined, isAllSelect:false,}); Const rowSelect = (selection, row) => {if (row.children) {// Only respond to rows with children if (! Row. Children. Map ((item) => {// Iterate over all children proxy.$refs.multipleTable.toggleRowSelection(item, true); Row, selected toggleRowSelection If the second parameter is used, select toggleRowSelection */ item.isChecked = true; */ item.isChecked = true; }); row.isChecked = true; / / the current line isChecked logo switch element to false} else {row. Children. The map ((item) = > {proxy. $refs. MultipleTable. ToggleRowSelection (item, true); item.isChecked = true; }); row.isChecked = false; } // console.log(this.multipleSelection, row); }}; const toggleSelection = (row, select) => { if (select) { proxy.$refs.multipleTable.toggleRowSelection(row, select); } else { proxy.$refs.multipleTable.clearSelection(); }}; const selectAll = (selection, first) => { if (! first) { state.isAllSelect = ! state.isAllSelect; } selection.map((el) => { if (el.children) { el.children.map((item) => { toggleSelection(item, state.isAllSelect); }); if (el.children.length > 0) { selectAll(el.children, true); } }else{ toggleSelection(el, state.isAllSelect); }}); }; return { rowSelect, selectAll, toggleSelection, ... toRefs(state), }; }}; </script>Copy the code