【vue 项目】有关cascader任选一级、字段名不同、同时获取value和label值、回显(推父节点)等问题解决


最近做项目将之前下拉框改成了element的cascader级联选择,来更清楚展现层级关系,由于之前没有用过cascader,把所有坑踩了个遍,在此记录一下。
首先说明,后端只将原本一起返给选择框的数据改成了有层级的树状结构,由于之前添加修改信息的接口关于这个选择框只存当前选中这级的id,不好意思麻烦后端改,所以在存取信息的时候这个cascader不是数组结构,这里需要进行转换,存的时候通过只存数组最后一个,取的时候要通过最后一级id推前面的父id组成完成数组,进行回显。

选择任意一级选项

在这里插入图片描述
element官网上说明

可通过 props.checkStrictly = true 来设置父子节点取消选中关联,从而达到选择任意一级选项的目的。

于是我的代码

<el-form-item label="公司" prop="companyId">
	<el-cascader
		v-model="form.companyId"
		placeholder="请选择"
		:options="companyOptions"
		:props="{ checkStrictly: true }"
	 />
</el-form-item>

此处留下了一个坑,关于v-model的,后续会讲到

字段名转换

在这里插入图片描述
从官方文档可以看到字段名是value和label
但是后端返回的是id和name
直接赋值,两者会对不上
前端的名字也不是自己定义的,不能直接修改
只能进行转换

<el-form-item label="公司" prop="companyId">
	<el-cascader
		v-model="form.companyId"
		placeholder
  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值