我们先看 Cascader 级联选择器 官方文档提供的数据格式:
options: [
{
value: "zhinan",
label: "指南",
children: [
{
value: "shejiyuanze",
label: "设计原则",
children: [
{
value: "yizhi",
label: "一致",
},
{
value: "fankui",
label: "反馈",
},
{
value: "xiaolv",
label: "效率",
},
{
value: "kekong",
label: "可控",
},
],
},
],
},
],
而一般后台给我们返回的数据格式是这样的:
data: [
{
id: 1,
children: [
{
id: 2,
children: [
{
id: 6,
children: null,
label: "测试组",
},
],
label: "研发部",
},
{
id: 4,
children: null,
label: "商务部",
},
],
label: "万物互联",
},
],
跟官方文档要求的完全不一样,这样就会在使用的过程中出现一系列的问题:(比如下面这个)
选中一个直接全部选中,这显然不是我们想要的那种结果,那怎么办呢????
我们只能通过改变后台返回的数据来实现想要的功能,我们可以给el-cascader 绑定 props(:props="optionProps") 属性来进行设置:
<el-cascader
ref="cascader"
v-model="values"
:options="options"
@change="handleChange"
:props="optionProps"
:show-all-levels="false"
></el-cascader>
在data中:
// 使用Cascader 级联选择器后台返回的数据和要求的不一致时,做出相应改变
optionProps: {
value: "id",
label: "label",
children: "children",
},
这样就完美的解决了上面所出现的问题:
如果只想选中最后一级,只需要加上这个属性就可以了::show-all-levels="false"
如果想要获取当前选中的对象,文档中并没有提供直接获取当前选择的Object
这里特别需要注意element-ui
的版本问题
2.7.0
版本之前
可以用this.$refs['cascader'].currentLabels
获取选中节点
<el-cascader
ref="cascader"
v-model="values"
:options="options"
@change="handleChange"
:props="optionProps"
:show-all-levels="false"
></el-cascader>
handleChange(value) {
let nodesObj = this.$refs['cascader'].currentLabels
console.log(nodesObj);
},
这里着重说一下 2.7.0
版本之后
可以用this.$refs['cascader'].getCheckedNodes()
获取选中节点
this.$refs['cascader'].currentLabels
在2.7版本给移除了 可以通过this.$refs['件名'].getCheckedNodes()
获取到选中的节点
<el-cascader
ref="cascader"
v-model="values"
:options="options"
@change="handleChange"
:props="optionProps"
:show-all-levels="false"
></el-cascader>
handleChange(value) {
let nodesObj = this.$refs["cascader"].getCheckedNodes();
console.log(nodesObj);
console.log(nodesObj[0].data); //打印当前选中的节点的信息
console.log(nodesObj[0].data.id);
},
可以选择其中某一级的:
级联选择器默认只能选择最后一级的,想要选择任意一级,我们可以在属性设置时加上:checkStrictly: true 或 加上属性 change-on-select(不推荐)
推荐 :(在data中写)
optionProps: {
value: "id",
label: "label",
children: "children",
checkStrictly: true // 可选择任意一级
},
不推荐element已废弃
<el-cascader
v-model="temperatureFrom.options.organizationId"
:options="options"
ref="cascader"
@change="handleChange"
size="small"
:props="optionProps"
change-on-select
clearable
></el-cascader>
当你给你的层级选择器写上 clearable 属性之后,可以清空输入框内的内容 但是有时候你会发现引起一系列的报错:(比如这样)
这是因为你点击清楚数据之后,里面数据是空,但是我后面又调用里面的数据,所以才会报错:不过我们可以对先对齐进行判断一下:
handleChange(value) {
// console.log(value)
let nodesObj = this.$refs["cascader"].getCheckedNodes();
// this.normalHearForm.organizationId = nodesObj[0].data.id;
if (nodesObj.length != 0) {
this.normalHearForm.organizationId = nodesObj[0].data.id;
console.log(this.normalHearForm.organizationId);
} else {
this.normalHearForm.organizationId = 0;
}
},
这样就好了!!!