el-tree勾选

### 实现 Element UI `el-tree` 组件的勾选功能 #### 设置基础属性 为了启用 `el-tree` 的勾选功能，需设置 `show-checkbox` 属性。此属性允许用户通过复选框来选择树节点[^1]。 ```html <el-tree :data="treeData" show-checkbox></el-tree> ``` #### 控制默认选中项 可以使用 `default-checked-keys` 来指定初始状态下哪些节点已被选中。这需要提供一个数组，其中包含要被默认选中的节点 ID 列表[^3]。 ```javascript const treeData = [ { id: 1, label: 'Level one 1', children: [ { id: 4, label: 'Level two 1-1' } ] }, ]; // 默认选中的键值集合 const defaultCheckedKeys = [4]; ``` #### 获取已选项 当用户的交互改变了树的选择状态时，可以通过监听 `@check-change` 或者 `@check` 事件获取最新的选中情况。这两个事件的区别在于触发时机不同，前者是在单个节点的状态改变时立即响应，而后者会在整个操作完成后返回最终的结果集。 ```javascript function handleCheckChange(data, checked, indeterminate) { console.log('node:', data); console.log('checked:', checked); } function handleCheck() { const selectedNodes = this.$refs.tree.getCheckedNodes(); console.log(selectedNodes); } ``` #### 自定义行为逻辑 对于更复杂的业务场景，比如限制可选数量、父子关联控制等，则可以在上述基础上进一步定制化处理方式： - **限制最大选取数目**：借助于 `props.checkStrictly` 和自定义的方法实现对多选上限的约束[^2]。 - **严格遵循父子关系**：确保子节点随父节点一同变化的同时不超过设定的最大限额，并合理调整超出部分的数据展示策略。 - **单一层次内的唯一性选择**：针对特定层级下的互斥条件设计相应的过滤机制，防止同一级别中有多个项目被同时激活[^4]。 #### 示例代码片段 下面给出一段综合运用以上特性的 Vue.js 模板实例： ```html <div class="selectTree"> <div class="selectTree-input"></div> <!-- 输入框样式 --> <div class="selectTree-tree"> <!-- 树形控件容器 --> <el-tree :data="data" default-expand-all show-checkbox highlight-current node-key="id" :props="defaultProps" :filter-node-method="filterNode" :default-checked-keys="checkList" @check="handleCheck" ref="tree" ></el-tree> </div> </div> <script> export default { methods: { filterNode(value, data) {}, handleCheck(node, status) {} }, }; </script> ```