el-cascader中getcheckednodes和clearcheckednodes如何使用

### el-cascader 组件中 getCheckedNodes 和 clearCheckedNodes 方法的使用方式 在 `el-cascader` 组件中，`getCheckedNodes` 和 `clearCheckedNodes` 是用于操作级联选择器选中状态的两个重要方法。 #### 1. `getCheckedNodes` 方法 `getCheckedNodes` 方法用于获取当前级联选择器中所有被选中的节点。该方法可以接受一个布尔参数，表示是否只返回叶子节点。 - **语法**： ```javascript cascaderRef.getCheckedNodes(leafOnly) ``` - `leafOnly`（可选）：布尔值，如果为 `true`，则只返回叶子节点；默认为 `false`。 - **示例代码**： ```javascript const checkedNodes = this.$refs.cascader.getCheckedNodes(true); // 只获取叶子节点 console.log(checkedNodes); ``` 上述代码通过调用 `getCheckedNodes` 方法获取所有选中的节点，并打印到控制台[^4]。 #### 2. `clearCheckedNodes` 方法 `clearCheckedNodes` 方法用于清空级联选择器中的选中状态。需要注意的是，直接调用组件实例上的 `clearCheckedNodes` 方法可能无效，需要通过访问内部的 `panel` 引用才能正确执行清除操作。 - **语法**： ```javascript cascaderPanelRef.clearCheckedNodes() ``` - **示例代码**： ```javascript this.$refs.cascader.$refs.panel.clearCheckedNodes(); // 清空选中状态 ``` 在某些情况下，可能需要额外的操作来确保界面同步更新，例如清空高亮路径或手动触发事件[^3]。 #### 完整示例 以下是一个完整的示例，展示了如何结合 `getCheckedNodes` 和 `clearCheckedNodes` 方法使用： ```vue <template> <div> <el-cascader ref="cascader" v-model="selectedValue" :options="options" @change="handleChange" /> <el-button @click="clearSelection">清空选择</el-button> </div> </template> <script> export default { data() { return { selectedValue: [], options: [ { value: 'zhinan', label: '指南', children: [ { value: 'shejiyuanze', label: '设计原则', children: [ { value: 'yizhi', label: '一致' }, { value: 'fankui', label: '反馈' } ] } ] } ] }; }, methods: { handleChange(value) { const checkedNodes = this.$refs.cascader.getCheckedNodes(true); // 获取叶子节点 console.log('选中的节点:', checkedNodes); }, clearSelection() { this.$refs.cascader.$refs.panel.clearCheckedNodes(); // 清空选中状态 this.selectedValue = []; // 同时清空 v-model 绑定的值 } } }; </script> ``` #### 注意事项 1. 如果直接调用 `this.$refs.cascader.clearCheckedNodes()` 无效，可能是由于未正确访问内部的 `panel` 引用。需要通过 `this.$refs.cascader.$refs.panel.clearCheckedNodes()` 来实现清除功能[^5]。 2. 在 Vue 中，若使用了 `v-model` 绑定值，清除选中状态时也需要同步清空绑定的变量，以确保数据一致性[^4]。