一、單選模式下選擇任意節點

在單選模式下，只能選擇葉子節點，是因為父子節點存在關聯。官方文件中寫道：“可通過 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