Element-ui-plus 新版本：Select 选择器 | Element Plus

要实现如上的效果 ，要用到具名插槽 prefix，看代码：

<template><el-dialog ref="dialogRef" v-model="dialogVisible" :title="title" :width="dialogWidth" :before-close="handleClose" :close-on-click-modal="closeModal" :append-to-body="appendToBody" :class="['resizable-dialog', { 'is-dragging': isDragging }]" draggable><template #header><div class="dialog-header flex flex-col justify-center items-center"><div class="dialog-title font-bold text-gray-100">Transfer Crypto</div><div class="text-gray-500"> Balence: $33.96</div></div></template><el-form label-position="top"><el-form-item label="TOKEN"><el-select v-model="voData.form.chain" placeholder="Select Chain"><el-option v-for="item in voState.chainOptions" :key="item.value" :label="item.label" :value="item.value"><div class="flex items-center gap-1"><svg-icon class="w-3 h-3 ml-2" :name="item.icon" /><span :style="{ color: item.value }">{{ item.label }}</span></div></el-option><template #prefix><svg-icon class="w-3 h-3 ml-2" :name="selectedIcon"></svg-icon></template></el-select></el-form-item></el-form></el-dialog></template><script setup lang="ts">
import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
import SvgIcon from "../SvgIcon/SvgIcon.vue";// 定义 props
const props = defineProps({title: {type: String,default: "标题",},visible: {type: Boolean,default: false,},closeModal: {type: Boolean,default: false,},appendToBody: {type: Boolean,default: true,},
});// 定义 emits
const emit = defineEmits(["update:visible","close","cancel","confirm","save",
]);// 弹窗显示状态
const dialogVisible = computed({get: () => props.visible,set: (val) => emit("update:visible", val),
});// 弹窗宽度
const dialogWidth = ref("380px");const dialogRef = ref(null); // ref 引用const voState = reactive({chainOptions: [{label: "USDC",value: "USDC",icon: "usdc",},{label: "DAI",value: "DAI",icon: "dai",},{label: "ETH",value: "ETH",icon: "eth",},{ label: "USDC.e", value: "USDC.e", icon: "usdc" },{ label: "USDT", value: "USDT", icon: "usdt" },{ label: "POL", value: "POL", icon: "pol" },{ label: "WETH", value: "WETH", icon: "weth" },],
});const voData = reactive({form: {chain: "",},
});// 根据选中的值动态计算图标
const selectedIcon = computed(() => {const selectedOption = voState.chainOptions.find(option => option.value === voData.form.chain);return selectedOption ? selectedOption.icon : null;
});// 关闭弹窗
const close = () => {emit("close");dialogVisible.value = false;
};// 取消
const cancel = () => {emit("cancel");dialogVisible.value = false;
};// 确认
const confirm = () => {emit("confirm");
};// 保存
const save = () => {emit("save");
};// 处理关闭事件
const handleClose = () => {emit("cancel");dialogVisible.value = false;
};// 监听窗口大小变化
onMounted(() => {});// 移除监听器
onUnmounted(() => {});
</script><style lang="scss" scoped>
</style>