Element-ui 自定义下拉框，实现选择图片并且回显图片

最新推荐文章于 2024-07-02 17:13:20 发布

Hi，all

最新推荐文章于 2024-07-02 17:13:20 发布

阅读量3.5k

点赞数 3

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/jinchunzhao123/article/details/106607351

版权

Vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Element UI的Select组件创建自定义的下拉框，通过绑定图片作为选项标签并更改选中状态的样式，实现独特的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义select下拉框：

<!-- mark用来确定方向的指向 -->
<el-select v-model="scope.row.mark" style="width: 100%;" placeholder="请选择" @change="changeSelection(scope)"  :ref="'select'+scope.$index">
   <el-option
       v-for="item in directionOption"
       :key="item.value"
       :label="item.label"
       :value="item.value">
        <img  :src="item.label" >
    </el-option>
</el-select>


export default {
  data(){
    return {
     // label：图片路径 value：方向指向
      directionOption:[
        {
          label:'/static/img/rel/right.png',
          value:'0'
        }, {
          label:'/static/img/rel/left.png',
          value:'1'
        },
      ],
    };
  },

效果：

选中后的效果：

js动作实现：

methods: {
    //关系方向下拉框改变事件
    changeSelection(scope){
      let mark = scope.row.mark;
      let i = scope.$index;
      for(let index in this.directionOption){
        let aa = this.directionOption[index];
        let value = aa.value;
        if(mark === value ){
          this.$refs[`select${i}`].$el.children[0].children[0].setAttribute('style','background:url('+ aa.label +') no-repeat;color:#fff;text-indent: -9999px;background-position: center center');
        }
      }
    },
 }