<template>
<el-select ref="myselectref" v-model="currentValue" v-bind="$attrs">
<slot name="option">
<el-option v-for="item in $attrs.options" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</slot>
</el-select>
</template>
<script setup>
const { proxy } = getCurrentInstance();
const { value } = defineProps();
const emit = defineEmits();
const currentValue = ref(value);
watch(currentValue, newValue => {
emit('update:modelValue', newValue);
});
onMounted(() => {
// 重写tag 标签删除
proxy.$refs.myselectref.deleteTag = function (event, tag) {
ElMessageBox.confirm("是否删除？", "提示", {
confirmButtonText: "确认",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
const index = proxy.$refs.myselectref.states.selected.indexOf(tag);
if (index > -1 && !proxy.$refs.myselectref.selectDisabled) {
const value = proxy.$refs.myselectref.$props.modelValue.slice();
value.splice(index, 1);
emit('update:modelValue', value);
emit('remove-tag', tag.value);
emitChange(value);
}
event.stopPropagation();
focus();
})
.catch(() => {
});
}
// 重写清空
proxy.$refs.myselectref.handleClearClick = function (event) {
ElMessageBox.confirm("是否删除？", "提示", {
confirmButtonText: "确认",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
proxy.$refs.myselectref.deleteSelected(event);
})
.catch(() => {
});
}
})
</script>标签：elementPlus,const,删除,refs,value,myselectref,tag,proxy From： https://www.cnblogs.com/zxh-bug/p/18174766