[element-plus] el-select 下拉选择图片

html 复制代码
<el-select v-model="imgName" >
  <template #prefix>
  	<img :src="getImageUrl(imgName)" v-if="imgName"/>
  </template>
  <el-option v-for="item in imgNameList" :label="item" :value="item">
    <div class="option-container">
      <img src="item.imgName"/>
    </div>
  </el-option>
</el-select>
javascript 复制代码
const imgNameList = ref([
	{
		id:1,
		imgName:'tupian'
	}
])


function getImageUrl(name:string) {
  return new URL(`.../assets/images/${name}.png`, import.meta.url).href
}

参考:

vue3 img :src 动态引入图片

【Vite + Vue3】ElementPlus el-select 实现下拉选择图标,并将图标回显到选择框中

相关推荐
_codeOH21 小时前
Vue 3 vs React 19:框架还在卷,核心原理就这些
前端·vue.js
英勇无比的消炎药1 天前
新手必看玩转TinyRobot一定要避开这些坑
前端·vue.js
英勇无比的消炎药1 天前
别再盲目混用AI组件库和传统组件库差距原来这么大
前端·vue.js
英勇无比的消炎药1 天前
前端提效神器全新AI组件库TinyRobot改写日常开发模式
前端·vue.js
英勇无比的消炎药1 天前
前端提效神器TinyRobot
前端·vue.js
CDwenhuohuo1 天前
uni 背景色渐变 全屏
前端·javascript·vue.js
爱怪笑的小杰杰1 天前
Vue 项目交付第三方开发,如何隐藏核心 JS 源码?
前端·javascript·vue.js
小二·1 天前
Vue 3 组合式 API 进阶实战
前端·javascript·vue.js
rising start1 天前
九、vue3 组件通信:全场景详解
前端·vue.js·typescript
编程技术手记1 天前
Vue Scoped CSS 与动态创建 DOM 的兼容性问题
前端·css·vue.js