el-tree 和 el-select 结合禁用选择父节点

### 实现 el-tree 和 el-select 结合时禁用选择父节点 在 `el-select` 与 `el-tree` 组合的场景中，若需要实现**仅允许选择叶子节点（即禁止选择父节点）**，可以通过 `check-strictly` 模式结合自定义的 `node-click` 或 `check` 事件逻辑来控制选中行为。 #### 方法一：通过 `check-strictly` 模式结合 `node-click` 判断节点是否为叶子节点 使用 `check-strictly` 可以让树节点不自动联动父子节点的选择状态。在此基础上，可以在 `node-click` 回调中判断当前点击节点是否为叶子节点（即 `children` 是否为空或长度为0），从而决定是否将其加入选中状态。 ```vue <template> <el-select v-model="selectedNode" placeholder="请选择" filterable clearable multiple> <el-option disabled value="" style="height: auto; background-color: #fff"> <el-input v-model="filterText" placeholder="请输入关键字" /> <el-tree :data="treeData" show-checkbox default-expand-all node-key="id" check-strictly :filter-node-method="filterNode" @node-click="handleNodeClick" ref="tree" /> </el-option> </el-select> </template> <script> export default { data() { return { selectedNode: [], filterText: '', treeData: [ { id: 1, label: '父节点1', children: [ { id: 2, label: '子节点1' }, { id: 3, label: '子节点2' } ] }, { id: 4, label: '父节点2', children: [] } ] }; }, methods: { filterNode(value, data) { if (!value) return true; return data.label.includes(value); }, handleNodeClick(data) { // 仅允许选择没有子节点的节点（叶子节点） if (!data.children || data.children.length === 0) { const index = this.selectedNode.indexOf(data.id); if (index === -1) { this.selectedNode.push(data.id); } else { this.selectedNode.splice(index, 1); } } } } }; </script> ``` 该方法通过 `handleNodeClick` 控制只有叶子节点可以被选中，非叶子节点点击无效，达到了禁用选择父节点的目的[^2]。 #### 方法二：使用 `check` 事件配合 `setCheckedNodes` 手动设置选中状态 另一种方式是监听 `check` 事件，并在其中判断当前节点是否为叶子节点。如果不是，则手动取消其选中状态： ```javascript methods: { handleNodeCheck(checkedNodes) { const validNodes = checkedNodes.filter(node => !node.children || node.children.length === 0); this.$refs.tree.setCheckedNodes(validNodes); this.selectedNode = validNodes.map(node => node.id); } } ``` 通过此方法可以更精确地控制选中节点集合，确保用户只能选中叶子节点。 --- ###