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

相关推荐
想做后端的前端3 小时前
WebGL实现FPS游戏
vue.js·游戏·webgl
英勇无比的消炎药7 小时前
TinyRobot v0.5.0 深度解读(三):Layout 组件——如何组织复杂工作区的页面布局
前端·vue.js
英勇无比的消炎药7 小时前
TinyRobot v0.5.0 深度解读(四):CLI 脚手架——从零搭建 AI 应用的工程化实践
前端·vue.js·github
李明卫杭州8 小时前
Vue3 响应式概念 ↔ React 对应方案(类组件与函数组件)对照笔记
前端·vue.js·react.js
英勇无比的消炎药8 小时前
拖文件进来会发生什么:TinyRobot DragOverlay 与 v-dropzone 协同指南
vue.js
Revolution618 小时前
reactive 对象重新赋值后,表单为什么没有恢复默认值
前端·vue.js·面试
sugar__salt9 小时前
Vue3 核心特性深度解析:v-model、ref 属性与 nextTick 完全指南
前端·javascript·vue.js·前端框架·vue
古韵9 小时前
你的 uni-app 分页,一个 hook 搞定竞态和加载
javascript·vue.js·uni-app
亦暖筑序11 小时前
AgentScope-Java 入门:完善 Vue 前端、发布 GitHub,并规划下一步
java·前端·vue.js