el-select下拉框自定义内容添加多选框以及图片等_el-select 添加选项

el-select下拉框自定义内容添加多选框以及图片等。

需求介绍

在下拉框中添加多选的按钮以及头像等等。

// An highlighted block
<template>
  <div class="selectCheckbox">
    <div @click="selectNone" class="select-header">
      识人
      <div class="select-box" v-show="selectboxIsshow">
        <el-select v-model="value" placeholder="请输入" multiple>
          <el-checkbox-group v-model="checkList" @change="checkboxClick">
            <el-option :label="item.label" :value="item.value" v-for="item in options" :key="item.value">
              <div style="display:flex;align-items: center;">
                <div @click.stop>
                  <el-checkbox :label="item.value" style="display:flex;align-items: center;"
                    ><img src="../assets/default-avatar.png" style="width:30px;height:30px;margin-right:20px"
                  /></el-checkbox>
                </div>
                <div>{{ item.label }}</div>
              </div>
            </el-option>
          </el-checkbox-group>
        </el-select>
      </div>
    </div>
    <div class="footer">content</div>
  </div>
</template>

  methods: {
    checkboxClick(item) {
      this.value = item
    },
    selectNone() {
      this.selectboxIsshow = !this.selectboxIsshow
    },
  },
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
33
34

这里使用双向绑定数据即可，页面会自动加载。
效果如下：

还有就是在点击多选框的时候实际上会触发el-select本身的点击事件，这里用了@click.stop阻止冒泡即可。

参考博主博客地址：https://blog.csdn.net/zwd862375698/article/details/116936144?spm=1001.2014.3001.5501