cascader 怎么选择值

### 如何在 Cascader 组件中正确设置选中值 在 Element UI 的 `Cascader` 组件中，可以通过多种方式实现选中值的绑定和操作。以下是详细的说明： #### 1. 使用 `v-model` 实现双向绑定 `v-model` 是 Vue 提供的一种语法糖，用于实现父子组件之间的双向数据绑定。对于 `Cascader` 组件来说，`v-model` 的值会自动同步用户的选择。 ```html <el-cascader v-model="selectKeys" :options="parentCateList" :props="cascaderProps" @change="handleChange" clearable> </el-cascader> ``` 在此代码片段中，`selectKeys` 被绑定到了 `v-model` 上，因此当用户选择某个选项时，`selectKeys` 将会被更新为所选值[^1]。 #### 2. 配置 `props` 对象以自定义行为 为了更灵活地控制级联选择器的行为，可以使用 `:props` 来传递一个配置对象。该对象允许开发者调整默认的字段映射关系以及其他功能特性。 ```javascript const cascaderProps = { value: 'id', // 指定选项的值为该项对应的 id 字段 label: 'name', // 显示的内容来自 name 字段 children: 'subItems' // 子项存储在 subItems 数组中 }; ``` 此配置使得开发人员能够轻松适配不同的 JSON 数据结构[^2]。 #### 3. 清空已选中的值 如果希望手动清除用户的当前选择，则可以直接修改与 `v-model` 关联的数据变量即可完成清空动作。例如： ```javascript this.selectKeys = []; ``` 另外一种方法是在特定场景下调用 `$refs` 接口访问底层实例并执行相应逻辑。不过需要注意的是，在某些高版本库可能已经废弃了一些旧 API（比如 `.currentLabels`），此时推荐改用官方建议的新替代方案——即通过 `getCheckedNodes()` 方法获取完整的节点信息列表[^5]。 #### 4. 处理动态加载需求 针对存在大量层级或者异步请求才能拿到子集的情况，应该开启懒加载模式(`lazy`) 并提供回调函数来按需填充后续内容: ```html <el-cascader lazy :load="asyncLoadData" ... ></el-cascader> ``` 其中 `asyncLoadData(node)` 函数负责返回对应层次下的所有可用条目集合。 --- ### 示例代码展示 下面给出一段综合运用以上知识点的例子程序： ```vue <template> <div> <el-form-item label="父级分类："> <el-cascader v-model="selectedValue" :options="categoryOptions" :props="customProps" @change="onCategoryChanged" clearable> </el-cascader> </el-form-item> </div> </template> <script> export default { data(){ return{ selectedValue:[], categoryOptions:[ {"id":1,"name":"Electronics","children":[...]}, {...other categories}] }, customProps:{ checkStrictly:true, expandTrigger:'hover', } }; }, methods:{ onCategoryChanged(value){ console.log("Selected:",value); } } } </script> ``` ---