[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 实现下拉选择图标,并将图标回显到选择框中

相关推荐
zhengxianyi51510 分钟前
ruoyi-vue-pro优化——让菜单支持多个参数,一键直达【经营分析】、【生产报表】、【销售报表】
vue.js·前后端分离·数据大屏·ruoyi-vue-pro优化
bug总结36 分钟前
身份证号脱敏的正确实现
前端·javascript·vue.js
xkxnq1 小时前
第二阶段:Vue 组件化开发(第 19天)
前端·javascript·vue.js
虚诚2 小时前
vue2中树形表格怎么实现
前端·javascript·vue.js·ecmascript·vue2·树形结构
CUYG3 小时前
v-model封装组件(定义 model 属性)
前端·vue.js
五仁火烧5 小时前
npm run build命令详解
前端·vue.js·npm·node.js
志摩凛5 小时前
Element UI 长表单校验失败后自动展开折叠面板并滚动定位
数据结构·vue.js
xiaoyan20155 小时前
2026原创Electron39.2+Vue3+DeepSeek从0-1手搓AI模板桌面应用Exe
vue.js·electron·deepseek
Irene19915 小时前
使用 TypeScript 编写一个 Vue 3 模态框(Modal)组件
javascript·vue.js·typescript
前端_yu小白5 小时前
React实现Vue的watch和computed
前端·vue.js·react.js·watch·computed·hooks