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

满楼、2025-06-25 0:06
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
      }
    },