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

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

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

数据初始化的时候

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

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

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

### 使用指南 在Vue 3和Element Plus框架中,Cascader级联选择器可用于选择关联的数据,提供了简单使用及设置的功能。简单使用可通过如下代码实现,设置下拉选项值,使用`placeholder`属性设置占位符,`options`绑定数据源,`filterable`开启过滤功能,`v-model`进行双向数据绑定,`@change`监听选择变化事件并绑定处理函数,`props`设置级联选择器属性 [^2]: ```vue <el-cascader placeholder="商品信息" :options="dataSource.goodIds" filterable v-model="goodsIdAndShopId" @change="syncChangeGoodsIdAndShopId" :props="props" /> ``` ### 示例代码 #### 简单示例 在表单中使用Cascader级联选择器,设置了占位符、双向数据绑定、属性和选择变化的处理函数 [^3]: ```vue <el-form-item label="活动分类"> <el-cascader clearable placeholder="请选择活动分类" v-model="classify_value" :key="refreshClassify" :props="classifyProps" @change="handleChange" ></el-cascader> </el-form-item> ``` #### 动态数据懒加载示例 每一个接口针对不同的数据库表返对应的数据, 当前端页面点击父级标签,会把该父级标签的`parentId`传递给查询`childTag`数据库表的后端接口,该后端接口根据传递的`parentId`进行查询该父级标签下的所有子标签,然后再返给前端 [^4]。 ### 常见问题解决方案 #### 动态数据懒加载+问题vue3 + element plus项目开发中使用级联选择器`el-cascader`组件,数据列表节点是懒加载(动态数据),会遇到数据问题。无论数据列表结构如何,都能通过详细教程解决单选级联选择器、多选级联选择器在编辑数据问题,还提供了动态加载解决方法以及三级联动数据示例代码 [^1]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值