一、单选模式下选择任意节点
在单选模式下,只能选择叶子节点,是因为父子节点存在关联。官方文档中写道:“可通过 props.checkStrictly = true
来设置父子节点取消选中关联,从而达到选择任意一级选项的目的。”
使用示例:
<el-cascader :props="{ checkStrictly: true }" :options="options"></el-cascader>
二、单选模式下选中节点后,关闭下拉框
在单选模式下,选中节点后,下拉框不会关闭。增加点击事件,将下拉框dropDownVisible属性设置为false。注意:默认为click触发子菜单,在这里要改为hover。官方文档中写道:“通过props.expandTrigger
可以定义展开子级菜单的触发方式。”
使用示例:
// visible-change:下拉框出现/隐藏时触发 出现则为 true 隐藏则为 false
// expand-change:当展开节点发生变化时触发 各父级选项值组成的数组
// change:当选中节点变化时触发 选中节点的值
<el-cascader ref="elcascader" @visible-change="elCascaderOnlick" @expand-change="elCascaderOnlick" @change="regionHandleChange" :props="{ checkStrictly: true, expandTrigger: 'hover' }" :options="regions"></el-cascader>
methods: {
// 获取选中的数据,进行赋值操作
regionHandleChange(arr) {
// arr是选中的数组eg:[1, 5],但因为后台数据库设计暂时不支持数组传参,后台只要选中的节点的值,所以我将数组最后一个值取出来进行赋值操作
// 注意:这里要传的值相当于id,父子节点都是唯一的
if (arr) {
// 此方法返回的是一个元素,eg:5
this.add_host_Form.group_id = arr[arr.length - 1];
// 此方法返回的是一个数组,eg:[5]
// this.add_host_Form.group_id = arr.slice(-1);
}
},
// 触发click事件,关闭下拉框
elCascaderOnlick() {
let that = this;
// .el-cascader-node__label 和 .el-cascader-panel .el-radio 这是Element级联选择器的类,可以参考下方截图
setTimeout(function() {
document.querySelectorAll(".el-cascader-node__label").forEach((el) => {
el.onclick = function() {
this.previousElementSibling.click();
// 选中span标签后,关闭下拉框
that.$refs.elcascader.dropDownVisible = false;
};
});
document
.querySelectorAll(".el-cascader-panel .el-radio")
.forEach((el) => {
el.onclick = function() {
// 选中radio后,关闭下拉框
that.$refs.elcascader.dropDownVisible = false;
};
});
}, 100);
}
}
data() {
return {
add_host_Form: {
group_id: null
},
regions: [{
"label": "A-1区域",
"value": 1,
"haschild": true,
"children": [{
"label": "A-2过道",
"value": 5,
"haschild": false
}]
},
{
"label": "A-2区域",
"value": 2,
"haschild": true,
"children": [{
"label": "A-4过道",
"value": 7,
"haschild": false
}]
},
{
"label": "B-1区域",
"value": 3,
"haschild": true,
"children": [{
"label": "B-6过道",
"value": 9,
"haschild": false
},
{
"label": "B-2过道",
"value": 10,
"haschild": false
},
{
"label": "111",
"value": 16,
"haschild": false
}
]
},
{
"label": "C-1区域",
"value": 4,
"haschild": false
}
]
}
}
关于 .el-cascader-node__label 和 .el-cascader-panel .el-radio 两个类的来源
三、 在单选模式下隐藏radio样式,只显示文字
在单选模式下,会出现单选按钮样式,虽然这样方便让用户理解这里可以进行单选操作,但不得不吐槽一下,有点影响美观。我们可以使用组件自带的类进行css样式进行隐藏操作,注意style标签不要加scoped,不然样式就不生效了。
<style>
/* cascader 隐藏单选样式 start */
.el-cascader-panel .el-radio {
display: none;
}
/* cascader 隐藏单选样式 end */
</style>
在上一步代码的基础上elCascaderOnlick()方法可以将radio点击事件删去了,可以这样简写:
methods: {
regionHandleChange(arr) {
if (arr) {
this.add_host_Form.group_id = arr[arr.length - 1];
}
},
elCascaderOnlick() {
let that = this;
setTimeout(function() {
document.querySelectorAll(".el-cascader-node__label").forEach((el) => {
el.onclick = function() {
this.previousElementSibling.click();
that.$refs.elcascader.dropDownVisible = false;
};
});
}, 100);
}
}
四、在单选模式下,Cascader级联选择器进行数据回显
先上代码:
<el-cascader v-model="region_value" ref="elcascader" @visible-change="elCascaderOnlick" @expand-change="elCascaderOnlick" @change="regionHandleChange" :props="{ checkStrictly: true, expandTrigger: 'hover' }" :options="regions"></el-cascader>
在这里回显用于更新操作, 比新建操作多了一个v-model属性。region_value是数组,在data中这样定义:
data() {
return {
region_value: [],
edit_host_form: {
group_id: null
},
regions: [...省略]
}
}
数据回显关键代码:
// 假设后台返回的group_id字段有值,group_id = [1, 5]
if (res.data.data) {
// 将返回的数组进行赋值
this.region_value = res.data.data.group_id;
// 给要提交的区域赋值,数组最后一个数据
this.edit_host_form.group_id = this.region_value[
this.region_value.length - 1
];
}
在这里我不得不吐槽一下我自己。。。我虽然向后台传的是选中的节点的值,是整型的,不过后台进行封装处理后,返回给我的是一个数组,包含子父节点的值,eg:[5, 1]。你品,你细品,有没有哪里怪怪的?怪可爱的!呸呸呸!!!怪坑的!后台应该返回的是“父”、“子”节点的值,应该是[1, 5]。我说呢!怎么一级节点数据就可以正常回显,二级以及之后就不回显了,我还以为是返回的数据类型不对,我甚至怀疑是Element组件的Bug。我和组长说了这个情况,并演示了一下,组长就发现了问题。。。果然,我还是太年轻。然后让后台调整了一下数据顺序,正常回显。
五、清空Cascader级联选择器选中的值
增加clearable属性
<el-cascader clearable ref="elcascader" @visible-change="elCascaderOnlick" @expand-change="elCascaderOnlick" @change="regionHandleChange" :props="{ checkStrictly: true, expandTrigger: 'hover' }" :options="regions"></el-cascader>
六、Cascader级联选择器仅显示最后一级
Cascader级联选择器默认显示所有父子节点的值,并以符号“/”进行分隔。官方文档中写道:“属性show-all-levels
定义了是否显示完整的路径,将其赋值为false
则仅显示最后一级”
<el-cascader :show-all-levels="false" ref="elcascader" @visible-change="elCascaderOnlick" @expand-change="elCascaderOnlick" @change="regionHandleChange" :props="{ checkStrictly: true, expandTrigger: 'hover' }" :options="regions"></el-cascader>
附Element官方文档:https://element.eleme.cn/2.13/#/zh-CN/component/cascader