el-cascader组件回显功能

文章描述了在Vue.js应用中,如何在el-cascader组件中实现回显功能,特别是在父子不关联的情况下,仅根据后端返回的当前节点id(如610116)来勾选对应的选项。通过定义`findSelectedPath`方法遍历options数据,构建并设置选中路径到v-model绑定的form.areaId上。
摘要由CSDN通过智能技术生成

el-cascader组件回显功能

el-cascader组件 父子不关联的情况下,只返回当前节点id,进行勾选

从在这里插入图片描述
后端返回的当前节点的id为610116,要勾选成下面的情况
在这里插入图片描述

<el-cascader
	v-model="form.areaId"
	:options="options"
	:props="props"
	clearable
	style="width: 100%;"
/>


// 修改弹框  this.options为区域的数据   data.areaId为当前节点的id
data(){
	return {
		options: [
			areaName: "陕西省",
			areaType: "0",
			children:[
				{
					areaName: "西安市",
					areaType: "1",
					children:[
						
						{
							id: "610102", 
							parentId: "610100", 
							children: [], 
							areaName: "新城区", 
							cityName:"西安市",
							countyName:"新城区",
							fullName: "陕西省西安市新城区",
							areaType: "2", 
							provinceName: "陕西省",
						}
					],
					cityName:"西安市",
					countyName:null,
					fullName: "陕西省西安市",
					id: "610100",
					lgtd: null,
					lttd: null,
					parentId: "610000",
					provinceName: "陕西省",
				}
			],
			cityName:null,
			countyName:null,
			fullName: "陕西省",
			id: "610000",
			lgtd: null,
			lttd: null,
			parentId: null,
			provinceName: "陕西省",
		],
		props: {
		  checkStrictly: true,
		  value: 'id',
		  label: 'areaName'
		},
	}
}


methods:{
	eddClick(data) {
      this.dialogVisible = true
      this.title = '修改'
      data.areaId = this.findSelectedPath(this.options, data.areaId)
      this.form = data
    },
	findSelectedPath(options, selectedId, path = []) {
      for (const option of options) {
        path.push(option.id)
        if (option.id === selectedId) {
          return path
        }
        if (option.children) {
          const subPath = this.findSelectedPath(option.children, selectedId, path)
          if (subPath) {
            return subPath
          }
        }
        path.pop()
      }
      return null
    },
}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值