el-select 添加icon

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>