Element table树状表格选中，父级与子级关联显示

重点使用到 @select 以及 @select-all 两个方法

<el-table
		    ref="tableref"
			:data="tabledata"
			:default-expand-all="true"
			:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
			row-key="id"
			highlight-current-row
			style="width: 100%"
			@select-all="onSelectAll"
			@select="onSelect"
			@selection-change="handleSelectionChange"
		>
			<el-table-column type="selection" width="50" />
			<el-table-column prop="label" label="标题列" width="200" />
			<el-table-column label="标题列" width>
				<template #default="{ row }">
					<el-checkbox-group v-if="row.children&& row.children.length > 0" v-model="chekedApis">
						<el-checkbox v-for="api in row.children" :key="api.id" :label="api.id" @change="onChange(row)">{{ api.label }}</el-checkbox>
					</el-checkbox-group>
				</template>
			</el-table-column>
		</el-table>

Js代码：

主要代码是tableref.value!.toggleRowSelection(参数1, 参数2);部分，其中参数1是需要勾选的行，参数2是true/false，true选中，false取消选中；

根据返回数据格式不同修改代码相关值，若要存值提交到接口请求在对应if里进行push和splice删除操作即可

        //点击一，二级菜单事件   
        const onSelect = async (rowlist: any, row: any) => {
            //判断是选中还是取消选中
			const checked = rowlist.some((s: any) => s.id === row.id);
             //遍历选中项下的子集
			if (row.children && row.children.length > 0) {
				row.children.forEach((r: any) => {
					tableref.value!.toggleRowSelection(r, checked);
					selectApis(checked, r);
				});
			} else if (row.parentId) {//判断是否存在父级
				parentChange(row,checked,rowlist)
			} else {
				selectApis(checked, row);
			}
		};

        //点击三级菜单触发事件
        const onChange = (row: any) => {
			var d1 = row.apis.map((a: any) => {
				return state.chekedApis.some((b: any) => b == a.id);
			});
            //判断三级中是否存在有选中的，有一二级默认勾选
			if (d1.includes(true)) {
				tableref.value!.toggleRowSelection(row, true);
			} else {
				tableref.value!.toggleRowSelection(row, false);
			}
			parentChange(row,false,null)
		};

        const parentChange = (row: any,checked:any,rowlist:any) => {
			var d1 = state.permissionTree.find((b: any) => b.id == row.parentId);
			//判断一级是否有选中
			if(rowlist){//根据点击二，三级判断上一级下是否有其他选中，没有取消勾选
				var d2 = d1.children.map((a: any) => {
					if (rowlist.find((b: any) => b.id == a.id)) {
						return true;
					}
				});
			}else{
				var d2 = d1.children.map((a: any) => {
					if (state.checkedPermissions.find((b: any) => b == a.id)) {
						return true;
					}
				});
			}
			if (d2.includes(true)) {
				//防止其他父级中选中子集冲突
				tableref.value!.toggleRowSelection(d1, true);
			} else {
				tableref.value!.toggleRowSelection(d1, false);
			}
			if(rowlist){
				selectApis(checked, row);
			}
		};

        //选中二级时遍历下下面所有子集默认全选
        const selectApis = async (checked: any, row: any) => {
			if (row.children) {
				row.children.forEach((a: any) => {
					const index = state.chekedApis.indexOf(a.id);
					if (checked) {
						if (index === -1) {
							state.chekedApis.push(a.id);
						}
					} else {
						if (index > -1) {
							state.chekedApis.splice(index, 1);
						}
					}
				});
			}
		};