el-cascader 設置可以手動輸入也可以下拉選擇

稍微修改一下就可食用

   <template slot="stationId" slot-scope=""><div style="position: relative;"><!-- 可輸入也可顯示選項 --><el-input:value="stationNameInput"@input="onStationNameInput"@blur="onStationNameBlur"placeholder="請選擇或輸入"clearable><template slot="suffix"><i class="el-icon-arrow-down" @click="toggleCascader" style="cursor: pointer;" /></template></el-input><!-- 隱藏的 Cascader，僅觸發選項選擇 --><el-cascaderref="cascaderAddr"v-model="stationids":disabled="type === 'view'":check-strictly="true":options="unitTreeData":props="defaultProps"placeholder="請選擇所屬部門"@change="handleChange"style="position: absolute; top: 0; left: 0; opacity: 0; z-index: -1; pointer-events: none;"/></div></template>//datastationNameInput: '', // 展示輸入框內容isManualInput: false, // 判斷用戶是否在輸入//methods// 輸入框打開 CascadertoggleCascader() {const inputEl = this.$refs.cascaderAddr.$el.querySelector('input')if (inputEl) inputEl.click()},// 用戶手動輸入onStationNameInput(val) {this.stationNameInput = valthis.data.stationName = valthis.isManualInput = true},onStationNameBlur() {// 失去焦點后關閉輸入標記this.isManualInput = false},// 選擇之后，僅當不是手動輸入才填充handleChange(val) {this.stationids = valthis.data.stationId = val[val.length - 1]this.data.stationIds = val.join(',')if (!this.isManualInput) {const node = this.$refs.cascaderAddr.getCheckedNodes()?.[0]const label = node ? node.pathLabels.join('/') : ''this.stationNameInput = labelthis.data.stationName = label}},