<template>
<div>
<el-select ref="select" v-model="selectPages" multiple collapse-tags placeholder="请选择" @visible-change="selectVisible">
<el-option key="selectAll" label="" value="" v-if="options && options.length > 0" :disabled="true">
<el-checkbox v-model="pageSelectAll" @change="onSelectAll" >全选</el-checkbox>
</el-option>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
<el-checkbox @change="clickBox(item.value)" :value ="selectPages.includes(item.value)" :label="item.label"></el-checkbox>
</el-option>
</el-select>
</div>
</template>
<style scoped>
.btn-div{
position: absolute;
bottom: 10px;
z-index: 2;
width: 215px
}
</style>
<style>
/* .el-select__tags {
white-space: nowrap;
overflow: hidden;
height: 25px;
} */
.el-scrollbar__wrap {
overflow-x: hidden;
}
.el-scrollbar__bar{
bottom: 30px;
}
</style>
<script>
export default {
data() {
return {
pageSelectAll: false, //全选
selectPages: [],
options: [],
}
},
mounted() {
let options = []
for (let index = 1; index <= 20; index++) {
options.push({
value: index,
label: '选项' + index
})
}
this.options = options
console.log('mounted....')
},
methods: {
// 全选
onSelectAll(val) {
let selected = []
if(val) {
this.options.forEach(e => {
selected.push(e.value)
});
console.log('selected:::', selected)
this.selectPages = selected
} else {
this.selectPages = []
}
},
selectVisible(isShow) {
console.log('show:::', isShow)
if(isShow) {
const ref = this.$refs.select;
let popper = ref.$refs.popper
if (popper.$el) popper = popper.$el
if (!Array.from(popper.children).some(v => v.className === 'el-select-dropdown__empty')) {
console.log('存在数据')
popper = popper.firstChild
// let popperChild = popper.firstChild.firstChild
if(!Array.from(popper.children).some(v => v.className === 'btn-div')) {
console.log(popper)
const el = document.createElement('div')
el.className = 'btn-div'
el.style = 'margin-top: 15px;margin-bottom: 5px;'
el.innerHTML = `<div class="el-row is-justify-center el-row--flex">
<div class="el-col el-col-12" style="text-align: center;z-index: 2;">
<button type="button" class="el-button el-button--primary el-button--mini">
<!----><!----><span>确定</span>
</button>
</div>
<div class="el-col el-col-12">
<button type="button" class="el-button el-button--default el-button--mini">
<!----><!----><span>取消</span>
</button>
</div>
</div>`
popper.appendChild(el)
let okBtn = popper.lastChild.firstChild.children[0].children[0]
let cancelBtn = popper.lastChild.firstChild.children[1].children[0]
okBtn.onclick = () => {
this.ok()
}
cancelBtn.onclick = () => {
this.ok()
}
console.log('el.ok::', okBtn)
console.log('el.ok::', cancelBtn)
}
} else {
console.log('不存在数据')
}
}
},
cancel() {
this.$message('点击了取消~');
this.$refs.select.blur()
},
ok() {
this.$message('点击了取消~');
this.$refs.select.blur()
},
clickBox(val) {
console.log('val::', val);
let values = this.selectPages
if(values.includes(val)) {
this.selectPages = values.filter(n => n !== val)
} else {
values.push(val)
this.selectPages = values
}
console.log('this.value::', this.selectPages)
}
}
}
</script>
vue+elementui实现下拉框增加checkbox并可全选或取消（完整案例及效果图）.zip （2个子文件） 
index.vue 4KB
select.gif 495KB资源评论
- laotaipo1232022-06-15用户下载后在一定时间内未进行评价，系统默认好评。
- qq_404306592022-06-01用户下载后在一定时间内未进行评价，系统默认好评。
BillyYang123
- 粉丝: 3
- 资源: 12
