element:el-select添加图片以及自定义内容

<template>
  <div class="selectCheckbox">
    <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/image/3.jpg" style="width:30px;height:30px;margin-right:20px;border-radius: 100px;" />
                <div>{{ item.label }}</div>
              </el-checkbox>
            </div>
          </div>
        </el-option>
      </el-checkbox-group>
    </el-select>
  </div>
</template>
<script>
  export default {
    components: {},
    data() {
      return {
        value: '',
        checkList: [],
        options: [{
            label: '测试1',
            value: '1',
          },
          {
            label: '测试2',
            value: '2',
          },
          {
            label: '测试3',
            value: '3',
          },
          {
            label: '测试4',
            value: '4',
          },
        ],
      }
    },
    // html加载完成之前
    created() {
    },
    // 侦听器
    watch: {},
    // 计算属性
    computed: {},
    // 事件方法执行
    // html加载完成后执行
    mounted() {
      // this.getData()
    },
    methods: {
      checkboxClick(item) {
        this.value = item
      },
    },
  }
</script>
<style lang="less" scoped>
  /deep/.el-checkbox__label{
    width: 100%;
    height: 50px;
    width: 200px;
    display: flex;
    align-items: center;
    // background: red;
  }
</style>