The text prompt of the placeholder when the el-select component sets focus

 Use custom instructions to modify the value of componentInstance.currentPlaceholder when the select component gets focus. code show as below:

<el-select
    ref="remoteSelect"
    class="collapse-tags"
    placeholder="全部"
    v-focus-placeholder="'输入关键词搜索'"
    clearable
    multiple
    collapse-tags
    filterable
    remote
    :remote-method="getItemDict"
    :loading="itemDictLoading"
    v-model="filters.itemCode"
    value-key="optionCode"
    @blur="123"
>
    <el-option
        v-for="item of itemDict"
        :key="item.optionCode"
        :value="item"
        :label="`${item.optionCode} [${item.optionDisplayValue}]`"
    ></el-option>
</el-select>
// 多选:componentInstance.$refs.input
// 单选:componentInstance.$refs.reference
Vue.directive('focus-placeholder', {
  inserted (el, { value }, { componentInstance }) {
    const { $refs: { input, reference } } = componentInstance

    ;(input || reference).focus = () => {
      if (!componentInstance.value?.length) componentInstance.currentPlaceholder = value || '请选择'
    }
  },
})

Guess you like

Origin blog.csdn.net/baobao_123456789/article/details/120364270