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

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

稍微修改一下就可食用

js 复制代码
   <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-cascader
            ref="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>


//data
   stationNameInput: '', // 展示输入框内容
   isManualInput: false, // 判断用户是否在输入


//methods
   // 输入框打开 Cascader
    toggleCascader() {
      const inputEl = this.$refs.cascaderAddr.$el.querySelector('input')
      if (inputEl) inputEl.click()
    },

    // 用户手动输入
    onStationNameInput(val) {
      this.stationNameInput = val
      this.data.stationName = val
      this.isManualInput = true
    },

    onStationNameBlur() {
      // 失去焦点后关闭输入标记
      this.isManualInput = false
    },

    // 选择之后,仅当不是手动输入才填充
    handleChange(val) {
      this.stationids = val
      this.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 = label
        this.data.stationName = label
      }
    },
相关推荐
吃饺子不吃馅21 小时前
了解微前端:为何 Web Component 是绕不开的关键技术?
前端·javascript·架构
colorFocus21 小时前
都25年了,快用?.替代&&,??替代||
javascript
Asort21 小时前
JavaScript设计模式(十八)——备忘录模式:状态保存与恢复的艺术
前端·javascript·设计模式
社恐的下水道蟑螂21 小时前
一文吃透 JS 对象字面量:从基础用法到代理模式实践
javascript
小高00721 小时前
前端为什么离不开 Node.js?——从 `npm run dev` 按下回车那一刻说起
前端·javascript·面试
一枚前端小能手21 小时前
🔄 重学Vue之nextTick和slot - 从底层实现到实战应用的完整指南
前端·javascript·vue.js
有意义21 小时前
从HTML敲击乐了解开发流程
javascript
烟袅21 小时前
JavaScript 中的 null 与 undefined:你真的搞懂它们的区别了吗?
javascript
有点笨的蛋21 小时前
“花”点心思学代理:JavaScript中的对象与中介艺术
javascript
Hilaku1 天前
一个函数超过20行? 聊聊我的函数式代码洁癖
前端·javascript·架构