Element Plus进阶-第二篇：高级组件深入运用（二）

### Element Plus 中 el-cascader 组件实现回显功能 在 Element Plus 的 `el-cascader` 组件中，实现回显功能通常涉及以下几个方面： #### 1. 配置属性 为了支持父子节点不关联的情况并仅返回当前节点 ID，可以配置以下参数： - **`checkStrictly`**: 设置为 `true` 表示严格遵循父子节点不互相关联[^3]。 - **`emitPath`**: 设置为 `false` 只返回选中的节点值而不是整个路径。 ```html <el-cascader placeholder="请选择" v-model="selectedValue" :options="treeOptions" style="width: 100%" :props="{ checkStrictly: true, value: 'id', label: 'name', children: 'children', emitPath: false }"> </el-cascader> ``` #### 2. 数据准备 确保传入的选项数据 (`options`) 是树形结构，并且每个节点包含必要的字段。例如： ```javascript const treeOptions = [ { id: 1, name: "一级分类", children: [ { id: 2, name: "二级分类A" }, { id: 3, name: "二级分类B" } ] }, { id: 4, name: "另一级分类", children: [] } ]; ``` 如果需要动态加载子节点（懒加载），则需额外定义异步请求函数[^4]。 #### 3. 初始化默认值 通过绑定 `v-model` 属性设置初始选中项。假设服务器返回了一个单独的节点 ID 或者完整的路径数组，则可以直接赋值给模型变量。 ```javascript // 假设后端返回的是单个ID或者部分路径 let selectedValue = [3]; // 对应于“二级分类B” ``` 当页面首次渲染时，组件会自动匹配此值对应的节点并高亮显示它[^1]。 #### 4. 强制刷新视图 (可选) 某些情况下可能发现即使设置了正确的默认值，界面却没有正常更新。此时可通过 Vue 提供的方法手动触发 DOM 更新: ```javascript import { getCurrentInstance } from 'vue'; export default { setup() { const instance = getCurrentInstance(); function forceRefreshView(){ instance.ctx.$forceUpdate(); } return { forceRefreshView }; } } ``` 调用上述自定义方法即可解决此类问题[^2]。 #### 完整示例代码 以下是综合以上要点的一个完整例子： ```html <template> <div> <el-cascader placeholder="请选择类别" v-model="selectedValue" :options="categoryTree" :props="{ checkStrictly: true, value: 'id', label: 'name', children: 'children', emitPath: false }"> </el-cascader> </div> </template> <script> import { defineComponent, reactive, toRefs } from 'vue'; import { getCurrentInstance } from 'vue'; export default defineComponent({ data() { return { categoryTree: [], selectedValue: null }; }, created() { this.fetchCategories().then(() => { this.selectedValue = [this.categoryTree[0].children?.[0]?.id || '']; // 默认选第一个叶子节点作为演示 }); }, methods:{ async fetchCategories(){ try{ const res = await new Promise((resolve,reject)=>{ setTimeout(()=>{ resolve([ {"id":1,"name":"电子产品","children":[ {"id":2,"name":"手机"}, {"id":3,"name":"电脑"} ]} ]); },500); }); this.categoryTree=res; }catch(error){ console.error('获取分类失败:',error); } } } }); </script> ``` ### 注意事项 - 如果使用了懒加载模式(`lazy=true`)，记得提供相应的加载回调函数来填充子节点数据。 - 当遇到复杂场景比如跨层级跳转选择时，建议仔细调试 props 和事件监听器之间的交互关系[^5]。