Cascader 级联选择器使用(数据格式,表单校验)
一、 industryList: [ ] , // 数据来源,数据的回显,应该是个数组的形式,在我的项目中,接口回显的数据为,也是一个数组的形式。
二、 v-model绑定的数据格式:
但是官方给的数据格式是:
因此 通过 :props="industryProps" ,对数据进行处理,使其变为我们想要的数据。在data中对数据处理为:
官方props的描述为:注意:当使用上面的props定义数据时,需要注意,最里面一层数据要设置为null ,
如果数据比较多(也可以使用)
当使用上面那种形式时,会出现:(造成最后一项是暂无数据的结果是:因为数据的最后一层没有定义为null) 使用下面的数据处理一下,便不会造成这样的情况
getIndustry () {
// 获取技术领域
tree().then(res => {
console.log(res,'主要技术领域下拉的接口数据');
this.industryList = this.setTree(res);// 接口数据经过一个方法处理一下
});
},
setTree(data) { // 数据处理
let tree = data
for (let i of tree) {
if (i.children && i.children.length > 0) { // 如果数据有children,并且有数据,则再次执行一下数据处理
// 此处的children,是根据接口字段定的,因为此处接口给的是children
// 所以使用的就是children
this.setTree(i.children)
} else {
delete i.children
}
}
console.log(tree,'处理好的数据');
return tree
},
通过处理后,就完美的实现了,我们要的效果。
三、 校验
在el-form-item 中通过prop进行校验:校验的规则为:
此处的触发校验的方式是:blur.
在联级选择器中,触发的方式也可以是change,那么要添加type
cascadeRule:[
{type:'array', required: true, message: "请选择XXX", trigger: "change"}
],
添加type:'array' 触发的方式为change