关于vue使用el-cascader获取值的问题【超详细】

要解决的2个问题

问题1. 通过vue 的el-cascader组件，如何获取到级联值的信息？
1.1 可以选则多个级联选项的情况 【多选】
1.2 单选的情况

问题2. 如何回显信息？

问题1.1的解决方案，话不多说直接上代码

<div class="my-form-row">
   <el-form-item class="profession" prop="speciality">
         <el-cascader ref="mycascader" @change="changeCasc"  v-model="form.speciality" :options="specialityList" :props="deptsProps" clearable style="width: 504px;"></el-cascader>
     </el-form-item>
 </div>复制

js

data(){
	// cascader 属性
	deptsProps: {
		value: "code",
		label: "name",
		children: 'children',    //子元素字段名
	    multiple: true,
	    expandTrigger: 'hover',
	},
	
	form:{
       speciality:[]
   },
   
   specialityList: [],         // 申请专业列表[从后端获取的数据，并处理成树形结构的列表]
 
}复制

2 用cascader组件的change方法，有回调

这里有个坑：一定要用this.$nextTick（）否则出现选中的数据跟打印的数据不一致的问题，因为dom没有更新完成就获取

methods:{
// 选择 申请专业
     changeCasc(selectValuesArr){
      	console.log("选中的值:", selectValuesArr)
		this.$nextTick(()=>{
                // 级联多选专业 的最后一项的数组
                var newArr = []
 
                this.form.speciality.map((item) => {
                    newArr.push(item[item.length-1])
                })
                console.log('arr new', newArr)
				
 
                // 获取申请专业的label文字
                //this.specialiityNameList = this.getSpecialiityName(this.specialityList, selectValuesArr)
                //console.log(this.specialiityNameList)
                //if(this.specialiityNameList.length > 5) {
                //    this.specialiityNameList = this.specialiityNameList.splice(0,5)
                //    console.log(this.specialiityNameList.length)
                //}
                
		})
	},
}复制

到这里就问题1，获取的问题就欧啦

问题1.1的解决方案，单选的情况

再看一个的例子

<el-form-item label="组织机构" prop="organizationId">
	<el-cascader ref="mycascader" @change="changeCasc()" v-model="form.organizationId" :options="organizationList" :props="deptsProps" clearable style="width: 100%;"></el-cascader>
</el-form-item>复制

data() {
	//表单数据
	form: {
		parentId:0,//父类id 默认0（顶级）
		parentName:"顶级类",
		organizationId: "",//组织机构
		code: "",//角色编码
		name: "",//角色名称
		type:0,//类型
		description: "",//描述
		menuIds:[],//菜单权限
	},
	deptsProps: {
		value: "id",
		label: "name",
		checkStrictly: true,
		children: 'children',    //子元素字段名
	},
	organizationList:[],        // 树形结构
}复制

methods:{
	changeCasc(){
		this.$nextTick(()=>{
			let thsAreaCode = this.$refs['mycascader'].checkedValue
			this.form.organizationId=thsAreaCode[thsAreaCode.length-1]   // 取数组的最后一个
		})
	}
}复制

额外转为树结构的通用方法如下：

// 把数据处理成树状结构
translator(parents, childrens) {
	parents.forEach(item => {
		childrens.forEach(items => {
			if (items.parentId === item.id) {
				item.children ? item.children.push(items) : item.children = [items];
				this.translator([items], childrens);
			}
		})
	})
},
getTreeData(arr) {
	let parents = arr.filter(item => item.parentId===0); //取出根节点
	let childrens = arr.filter(item => item.parentId!==0);//去除子节点
	this.translator(parents, childrens)
	return parents
},复制

organizationList 格式如下

问题2的解决方案，话不多说直接上代码

回显其实也很简单，上面changeCasc（）方法获取到的整个数组信息，其实已经用this.form.speciality 进行双向绑定了，所以我们只需要将这个字段的整个信息传给后端，保存起来，然后查询的时候在返回赋值给this.form.speciality 就行

这种数据我这里贴一张图，是类似这样的多维度数组

这里解决一个疑惑，

上述changeCasc方法中 的newArr 其实是二维数组的每一项的最后一个值构成的数组，这是我传给后端的数据，这里可以根据你们自己的需求来定噢，如下图所示，这些值构成的新数组

至此，回显问题也已经欧拉
························································································································································································

后面几天我会继续更新滴，还有一些骚操作功能噢~