Cascader 级联选择器 初显的一些问题

本文探讨了级联选择器在前端开发中的优化方法,如何仅显示最末端一级并简化后台数据传递,通过异步处理初始化数据,以及如何正确提交最后一层ID。

使用级联选择器的时候只显示最末端的一级,而且后台也只需要传递一个id而不是数组的形式,所以级联选择器初始显示数据时候要进行异步处理。

数据初始化的时候

对options里的数据进行遍历,寻找显示的id所在的层级,定义一个数组,将所在的层级上的父级们的push进数组里,注意先后顺序,显示的id在最后。

数据作为表单提交的时候,一般后台需要的都是最后一层的id,提交的是一个字符串或者number,所以提交的时候将数组里的id取出来,如下:

数组只有一个元素的时候 直接取,如果两个以上,就取最后一个元素。

<think> 我们参考了多个关于Element UI Cascader组件的引用,特别是关于cascaderProps配置对象的描述。 根据引用[2]和引用[4],cascaderProps是一个对象,用于配置级联选择器的数据渲染格式。它包含多个属性,每个属性都有特定的作用。 主要属性: 1. `value`: 指定选项的值取自选项对象的哪个属性。例如,value: 'cat_id',表示每个选项的值将使用该选项的cat_id属性。 2. `label`: 指定选项的标签(示文本)取自选项对象的哪个属性。例如,label: 'cat_name',表示每个选项的示文本将使用该选项的cat_name属性。 3. `children`: 指定选项的子选项取自选项对象的哪个属性。例如,children: 'children',表示每个选项的子选项数组将使用该选项的children属性。 4. `expandTrigger`: 指定次级菜单的展开方式,可选值为'click'(点击展开)或'hover'(悬停展开),默认为'click'。 5. `checkStrictly`: 布尔值,表示是否严格的遵守父子互相关联。如果为true,则父子节点选中状态不再关联(即可以选择任意一级节点);如果为false,则父子节点选中状态关联(选择父节点会同选中子节点,选择子节点也会选中父节点)。 6. 此外,引用[3]中还提到了`:show-all-levels`属性(注意:这个属性是直接写在el-cascader标签上的,不是cascaderProps里的),用于控制在输入框中是否示选中值的完整路径(即所有层级),默认为true(示完整路径),如果设置为false,则只示最后一级的标签。 根据引用[1],有我们可能会遇到级联选择器需要动态刷新的情况,可以通过设置一个key并动态更新key来强制重新渲染级联选择器。 示例代码(结合引用[2]和引用[4]): 在模板中: ```html <el-cascader v-model="selectedKeys" :options="parentCateList" :props="cascaderProps" @change="parentCateChanged" clearable :key="cascaderKey" <!-- 用于强制重新渲染,当cascaderKey改变级联选择器会重新渲染 --> ></el-cascader> ``` 在JavaScript中: ```javascript data() { return { // 级联选择器的配置 cascaderProps: { expandTrigger: 'hover', // 次级菜单的展开方式,也可以是'click' value: 'cat_id', // 选项的值字段名 label: 'cat_name', // 选项的标签字段名 children: 'children', // 选项的子节点字段名 checkStrictly: true // 是否可以选择任意一级节点(true表示可以) }, parentCateList: [], // 数据源,通常从后端获取 selectedKeys: [], // 绑定选中的值(根据配置的value,这里选中的是cat_id的数组) cascaderKey: 0 // 用于强制重新渲染的key } }, methods: { parentCateChanged(value) { // 当选中节点变化触发,value是选中节点的value值(数组形式) } }, mounted() { // 例如:从后端获取数据 // this.getParentCateList(); } ``` 注意:当需要重新加载级联选择器的数据(比如数据源parentCateList更新了)但是级联选择器没有刷新,可以通过改变cascaderKey来强制重新渲染(例如:this.cascaderKey = new Date().getTime();)。 以上就是cascaderProps的用法总结。 §§相关问题§§ 1. 如何动态加载级联选择器的子选项(懒加载)? 2. Cascader级联选择器如何实现多选? 3. 在Cascader级联选择器中,如何设置默认值? 4. 如何禁用Cascader级联选择器中的某些选项? </think> ### CascaderProps 用法详解 在 Element UI 的 Cascader 级联选择器中,`CascaderProps` 是一个核心配置对象,用于定义数据源的结构和组件行为。以下是关键属性说明及用法示例: --- #### 核心属性配置 1. **value**(必填) 指定选项值对应的字段名,选中的值会存入 `v-model` 绑定的数组中。 示例:`value: 'cat_id'` → 选中收集对象的 `cat_id` 属性[^2][^4]。 2. **label**(必填) 指定选项示文本对应的字段名。 示例:`label: 'cat_name'` → 界面示对象的 `cat_name` 属性[^2][^4]。 3. **children**(必填) 指定子节点数据对应的字段名,用于构建层级结构。 示例:`children: 'children'` → 从对象的 `children` 字段获取子节点[^2][^4]。 4. **expandTrigger**(可选) 次级菜单展开方式,可选 `click`(点击)或 `hover`(悬停)。默认 `click`。 示例:`expandTrigger: 'hover'` → 鼠标悬停展开子菜单[^2][^4]。 5. **checkStrictly**(可选) 是否启用任意级选择(父子节点不关联)。 示例:`checkStrictly: true` → 可单独选择父节点(默认 `false` 需选到末级)[^2][^4]。 --- #### 完整示例代码 ```html <template> <el-cascader v-model="selectedKeys" :options="categoryOptions" :props="cascaderProps" @change="handleChange" clearable ></el-cascader> </template> <script> export default { data() { return { // 级联选择器配置 cascaderProps: { value: 'id', // 值字段名 label: 'name', // 示文本字段名 children: 'subItems', // 子节点字段名 expandTrigger: 'hover', // 悬停展开 checkStrictly: true // 允许任意级选择 }, // 绑定选中的值(数组形式) selectedKeys: [], // 数据源(通常从API获取) categoryOptions: [ { id: 1, name: "电子产品", subItems: [ { id: 11, name: "手机" }, { id: 12, name: "电脑" } ] } ] }; }, methods: { handleChange(selectedIds) { console.log("选中值:", selectedIds); // 输出如 [1, 12] } } }; </script> ``` --- #### 关键细节说明 1. **`v-model` 绑定** 始终为数组类型,存储选中路径各层级的 `value` 字段值(如 `[父ID, 子ID]`)[^2][^4]。 2. **动态更新问题** 若数据源变化后视图未更新,可通过 `:key="cascaderKey"` 强制刷新(修改 `cascaderKey` 值)[^1]。 3. **数据源要求** `options` 接收树形结构数据,每层节点需包含 `value`/`label`/`children` 字段(与 `props` 定义匹配)[^3][^4]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值