el-select下拉选择图片，并且回显图片_el-select 选择图片

回显图片有两种方法
第一种是通过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>        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

    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");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

但是这种方法在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;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在表格中的运用也是好的