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
},
},
这里使用双向绑定数据即可,页面会自动加载。
效果如下:
还有就是在点击多选框的时候实际上会触发el-select本身的点击事件,这里用了@click.stop阻止冒泡即可。
参考博主博客地址:https://blog.csdn.net/zwd862375698/article/details/116936144?spm=1001.2014.3001.5501