使用自定义指令,在select组件获取焦点时修改 componentInstance.currentPlaceholder 的值。代码如下:
<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 || '请选择'
}
},
})