el-cascader 设置可以手动输入也可以下拉选择

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}},