About the directory tree only shows the top level problem
Business requirements only display the first-level data, and selecting the first-level data can also select sub-data, so you can’t just take the first-level data; the implementation is as follows:
<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);
}
};
The effect is as follows:
Embed tree data in el-tabe table, delete function failure problem
Since the data in the table is tree-shaped data, it is inconvenient to delete according to the current serial number of the table. For example, there are two data in total below, and the serial number is 33. You cannot use the serial number to delete the business request to delete the parent node or its child nodes below 
. , to delete the entire data, as follows
<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('按钮处于禁用状态!');
}
};
Sublimation: It is required that only the root node has the delete function, and the child nodes do not
- Just add a v-if judgment to the button, that is, the root node is satisfied and the child nodes are not; the judgment data is passed from the background and can be used directly on the front-end page. The picture is as follows:
code show as below:
// 删除按钮
<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;
}
}
}
};
Personal suggestion (for reference only):
- It is recommended to use the for loop to traverse the array, because there is a problem with the forEach I used at the beginning, it may be a problem of personal ability, you can try it with forEach.
- There is also an index (serial number) in the tree data, but the index is inconsistent with the subscript of the data array.
- The code in the text is the identifier of the data, and it will not change with the deletion of the data. When the data is traversed to be equal to the current row, the deletion operation will be performed.