使用el-tree组件，只展示根节点，以及el-tabe 表格中嵌入树形数据，删除功能失效问题，以及只有根节点有删除功能，子节点没有

有关目录树只显示顶层问题

业务要求只显示第一层数据，且选择第一层数据可以将子数据也选择，所以不能只拿第一层数据；实现如下：

<el-tree
	:data="menuTreeData"
	:props="defaultProps"
	accordion
	@check-change="handleCheckChange"
	show-checkbox
	node-key="code"
	ref="menuTreeRef"
	:check-on-click-node="true"
	:filter-node-method="filterNode"
	:expand-on-click-node="false"
/>
// 	只需要将 children 字段不为 'children' 即可（ 'children'是后端传给前台的名字，不一定都叫这个名字）
defaultProps: {
   // children:'children',
	children: {
		disabled: true,
	},
	label: 'name',
	value: 'code',
},

 
// 将勾选数据入栈，方便发送
const handleCheckChange = (data: any, checked: boolean, indeterminate: boolean) => {
	if (checked) {
		state.selectNode.push(data);
		console.log('点击目录', state.selectNode);
	}
};

实现效果如下：

el-tabe 表格中嵌入树形数据，删除功能失效问题

由于表格中的数据为树形数据，不方便根据表格的当前序号来删除，例如下面总共就两条数据，序号到33了，不能用序号来删除
业务要求删除父节点或其下面的子节点时，实现整条数据都删除，实现如下

<el-table
	:data="tableData"
	style="width: 100%"
	:cell-class-name="tableCellClassName"
	ref="multipleTableRef"
	:header-row-style="headerRowStyle"
	:header-cell-style="headerCellStyle"
	row-key="name"
	:tree-props="{ children: 'children', hasChildren: 'haschildren' }"
	:disabled="disabledFlag"
	@cell-click="cellDel"
>
// 单元格删除
const cellDel = (row: any, column: any, cell: any, event: any) => {
	if (column.no == 5 && props.disabledFlag == false) {
		for (let i = 0; i < tableData.value.length; i++) {
			let tval = tableData.value;
			for (let j = 0; j < tval.length; j++) {
				if (tval[j].code === row.code.substring(0, 2)) {
					tableData.value.splice(j, 1);
					ElMessage.success('删除成功');
					return false;
				}
			}
		}
	} else if (column.no == 5 && props.disabledFlag == true) {
		ElMessage.warning('按钮处于禁用状态!');
	}
};

升华：要求只有根节点有删除功能，子节点没有

• 给按钮加一个 v-if 判断就行，即根结点满足，子节点不满足；判断数据是后台传过来的，可以直接在前端页面直接使用。图片如下：
  

代码如下：

// 删除按钮
<el-table-column width="50px" v-if="!disabledFlag">
	<template #default="scope">
		<span
			v-if="scope.row.parentCode === '-1'"
			class="tabDelRowBtnSysClass tabDelRowBtnIconSysClass"
			@click="handleDel(scope.$index, scope.row)"
			>
			<el-icon> <elementDelete /> </el-icon>
		</span>
	</template>
</el-table-column>
// 点击事件
const handleDel = (index: number, row: { [key: string]: any }) => {
	for (let i = 0; i < tableData.value.length; i++) {
		let tval = tableData.value;
		for (let j = 0; j < tval.length; j++) {
			if (tval[j].code === row.code.substring(0, 2)) {
				tableData.value.splice(j, 1);
				ElMessage.success('删除成功');
				return false;
			}
		}
	}
};

个人建议（仅供参考）：

1. 建议使用 for 循环遍历数组，因为我开始时使用的 forEach 有问题，可能是个人能力问题，你们可以用 forEach 试试。
2. 树形数据中也有 index (序号)，但 index 与数据数组的下标不一致。
3. 文中的 code 是数据的标识符，且不会随着数据的删除而变化，当遍历到数据等于当前行时，执行删除操作。