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

相关推荐
jjw_zyfx1 分钟前
vue3 vite element根据自定义数据实现离散滑块
javascript·vue.js·ecmascript
北极糊的狐3 分钟前
Vue3 中页面重定向的方式
前端·javascript·vue.js
灵魂学者4 分钟前
Vue3.x 高阶 —— 组合式API
前端·javascript·vue.js
JosieBook7 分钟前
【Vue】01 Vue技术——Vue简介
前端·javascript·vue.js
不会写DN16 分钟前
如何实现UniApp登录拦截?
前端·javascript·vue.js·typescript·uni-app·vue
哆啦A梦158816 分钟前
67 token 过期时间
前端·javascript·vue.js·node.js
萌狼蓝天19 分钟前
[Vue]AntV1.7表格自带筛选确定和重置按钮位置交换
前端·javascript·css·vue.js·html
by__csdn23 分钟前
Axios封装实战:Vue2高效HTTP请求
前端·javascript·vue.js·ajax·vue·css3·html5
匠心网络科技26 分钟前
前端框架-框架为何应运而生?
前端·javascript·vue.js·学习
艾小码39 分钟前
Vue 组件设计纠结症?一招教你告别“数据到底放哪”的烦恼
前端·javascript·vue.js