<el-tree @node-click="materialSelect" node-key="dicValue" ref="treeForm" @check-change="handleNodeClick" show-checkbox check-strictly :data="projectEngineType" :props="categoryProps"></el-tree> categoryProps: { value: 'dicValue', label: 'dicName', children: 'children' } materialSelect(data, node) { // console.log("data", data); node.checked = !(node.checked); }, handleNodeClick(data, checked, node) { console.log("data", data); if (checked === true) { this.$refs.treeForm.setCheckedKeys([data.dicValue]); } else { } this.onSubmit(); }, 代码解释

这段代码使用了 Element UI 的 `<el-tree>` 组件来展示树形结构，并实现了多选功能。

`<el-tree>` 组件的属性和事件的含义如下：

- `@node-click`：节点点击事件，绑定到 `materialSelect` 方法上，用于处理节点的点击事件。
- `node-key`：节点唯一标识的字段名，这里使用了 `dicValue`。
- `ref`：给组件添加一个引用，可以通过该引用访问组件的方法和属性。
- `@check-change`：节点选中状态改变事件，绑定到 `handleNodeClick` 方法上，用于处理节点选中状态的改变。
- `show-checkbox`：显示复选框。
- `check-strictly`：是否严格模式，允许选择多个节点。
- `:data`：树的数据源，这里使用了 `projectEngineType`。
- `:props`：树节点的属性配置，这里使用了 `categoryProps`。

`categoryProps` 是一个对象，定义了树节点的属性配置。其中：

- `value`：表示节点值对应的字段名，这里使用了 `dicValue`。
- `label`：表示节点显示文本对应的字段名，这里使用了 `dicName`。
- `children`：表示节点子节点对应的字段名。

在方法部分，有两个方法被调用：

1. `materialSelect(data, node)`：处理节点的点击事件。当节点被点击时，会触发该方法。该方法通过修改节点的 `checked` 属性来实现节点的选中与取消选中操作。

2. `handleNodeClick(data, checked, node)`：处理节点选中状态改变事件。当节点的选中状态改变时，会触发该方法。根据 `checked` 的值，通过 `$refs.treeForm.setCheckedKeys` 方法来设置选中的节点。

最后，在 `handleNodeClick` 方法中，调用了 `onSubmit` 方法，你可以在这个方法中编写提交逻辑。

希望能够帮助到你！如果还有其他问题，请随时提问。