Vue+Element 单选模式下Cascader级联选择器使用总结

一、单选模式下选择任意节点

在单选模式下，只能选择叶子节点，是因为父子节点存在关联。官方文档中写道：“可通过 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