table树形表结合多选表
问题一:子级全部选中父级没有自动选中

问题二:父级选中子级没有自动全选

问题三:图二子级取消选中,父级没有自动取消选中
而且目前子级二级树形操作
源码
<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="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></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',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
{
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
},
{
id: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
children: [
{
id: 31,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
},
{
id: 32,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
},
],
},
{
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
},
],
multipleTables: undefined,
isAllSelect:false,
});
const rowSelect = (selection, row) => {
if (row.children) {
if (!row.isChecked) {
row.children.map((item) => {
proxy.$refs.multipleTable.toggleRowSelection(item, true);
item.isChecked = true;
});
row.isChecked = true;
} else {
row.children.map((item) => {
proxy.$refs.multipleTable.toggleRowSelection(item, true);
item.isChecked = true;
});
row.isChecked = false;
}
}
};
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>