求助问题elementui或elementplus,table表格的多选树形结构表格

3,156 阅读1分钟

table树形表结合多选表

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

image.png

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

image.png

问题三:图二子级取消选中,父级没有自动取消选中

而且目前子级二级树形操作

源码

<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) {
					//由行数据中的元素isChecked判断当前是否被选中
					row.children.map((item) => {
						//遍历所有子节点
						proxy.$refs.multipleTable.toggleRowSelection(item, true); //切换该子节点选中状态
						/*
                方法名                    说明                                      参数
                                     用于多选表格,切换某一行的选中状态,         row, selected
                toggleRowSelection   如果使用了第二个参数,则是设置这一行
                                     选中与否(selected 为 true 则选中)
                 */
						item.isChecked = true;
					});
					row.isChecked = true; //当前行isChecked标志元素切换为false
				} else {
					row.children.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>