Element-UI 下拉选中图片显示图片

效果展示

代码展示

  <el-select
        v-model="selectedTypeLabel"
        placeholder=""
        @change="changeSelection"
        ref="select"
      >
        <el-option
          v-for="item in typeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
          <img :src="item.label" class="imgSize" />
        </el-option>
      </el-select>

 data() {
    return {
      selectedTypeLabel: "",
      typeOptions: [
        {
          label: require("../../../assets/imgs/left-join.png"),
          value: "left",
        },
        {
          label: require("../../../assets/imgs/inner-join.png"),
          value: "inner",
        },
      ],
    };
  }

 changeSelection(e) {
      for (let index in this.typeOptions) {
        let obj = this.typeOptions[index];
        if (obj.value == e) {
          this.$refs["select"].$el.children[0].children[0].setAttribute(
            "style",
            "background:url(" +
              obj.label +
              ") no-repeat;color:#fff;text-indent: -9999px;background-position: 18% center;background-size:contain;background-size:43%"
          );
        }
      }
    }

文章参考：https://www.cnblogs.com/vickylinj/p/13305906.html