el-cascader组件回显功能

el-cascader组件回显功能

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

el-cascader组件回显功能_第1张图片
后端返回的当前节点的id为610116,要勾选成下面的情况
el-cascader组件回显功能_第2张图片

<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
    },
}

你可能感兴趣的:(vue相关知识,css,javascript,html,elementui)