Element-UI 下拉選中圖片顯示圖片
阿新 • • 發佈:2020-12-07
效果展示
程式碼展示
<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%" ); } } }