回显图片有两种方法
第一种是通过ref给input框添加样式
<el-select
v-model="addForm.appPic"
size="medium"
placeholder="请选择应用图标"
filterable
@change="changeSelection"
ref="select"
>
<el-option
v-for="item in iconList"
:key="item.iconId"
:label="item.iconName"
:value="item.iconId"
>
<template>
<!-- elementui 的flex布局 -->
<el-row type="flex" :gutter="20" justify="center">
<el-col :span="4">
<img
:src="'/sp/icon/' + item.iconId + '.png'"
alt=""
width="30px"
height="30px"
/>
</el-col>
<el-col :span="16">
<span>{{ item.iconName }}</span>
</el-col>
</el-row>
</template>
</el-option>
</el-select>
changeSelection(val) {
for (let index in this.iconList) {
let obj = this.iconList[index];
if (obj.iconId == val) {
this.$refs["select"].$el.children[0].children[0].setAttribute(
"style",
`background: url(${"/sp/icon/" + obj.iconId + ".png"}) no-repeat;
width: 25px; height: 25px;
border: none;
background-position: 80% center;
background-size:65%`
);
}
}
},
//关闭弹框时去除样式
this.$refs["select"].$el.children[0].children[0].removeAttribute("style");
但是这种方法在el-table中失效,ref也是动态生成添加唯一标识也不管用
第二种是自定义一个img来展示图片,定位到input框上,并去掉input的边框
//css
.picDiv {
width: 100%;
height: 100%;
box-sizing: border-box;
position: relative;
.imgDiv {
width: 37px;
height: 37px;
position: absolute;
left: 0;
top: 0;
}
/deep/ .el-input__inner {
background-color: transparent;
border: none;
text-indent: -9999px;
}
}
在表格中的运用也是好的