問題描述：
el-select下拉框要求實(shí)現(xiàn)全選功能。具體功能包括：
- 當(dāng)選擇【全選】時(shí)，所有選項(xiàng)全部被勾選；
- 當(dāng)選擇【反選】時(shí)，已選擇選項(xiàng)變?yōu)槲催x擇選項(xiàng)，未選項(xiàng)變?yōu)橐堰x項(xiàng)
- 當(dāng)選擇【清空】時(shí)，所有選項(xiàng)變?yōu)槲催x
如下圖：
解決方法：
1、給el-select增加【全選】【清空】【反選】按鈕
2、為el-select綁定change事件和remove-tag事件，具體實(shí)現(xiàn)全選功能寫在事件中
實(shí)例代碼：
組件：
<el-form-item label="關(guān)聯(lián)設(shè)備" v-if="node.nodeId != 11 && node.nodeId != 21 && node.nodeId != 22 ">
<el-select style="width: 100% " v-model="node.devices" size="small" multiple collapse-tags filterable placeholder="請(qǐng)選擇" :filter-method="dataDevFilter">
<div class="select_up">
<el-button type="text" v-on:click="selectDevAll">
<i class="el-icon-circle-check" />
全選</el-button>
<el-button type="text" v-on:click="removeDevTag">
<i class="el-icon-close" />
清空</el-button>
<el-button type="text" v-on:click="selectDevReverse">
<i class="el-icon-copy-document" />
反選</el-button>
</div>
<div class="select_list">
<el-option
v-for="item in devOptions"
:key="item.deviceCode"
:label="item.deviceName"
:value="item.deviceCode">
</el-option>
</div>
</el-select>
</el-form-item>?js方法：
//用戶列表----start
//清空操作
removeTag() {
this.node.users = []
},
//全選操作
selectAll(val) {
this.options.map(item => {
if(!this.node.users.includes(item.userName)){
this.node.users.push(item.userName)
}
})
console.log(this.node.users)
},
//反選操作
selectReverse(val) {
val = []
this.options.map(item => {
let index = this.node.users.indexOf(item.userName);
//判斷現(xiàn)有選中數(shù)據(jù)是否包含如果不包含則進(jìn)行反選數(shù)據(jù)
if (index != -1) {
} else {
val.push(item.userName)
}
})
this.node.users = val
},
dataFilter(query) {
// this.value = val //給綁定值賦值
if(query == ''){
//val不存在還原數(shù)組
this.options= this.userList
}else{
let result = [] //存儲(chǔ)符合條件的下拉選項(xiàng)
this.userList.forEach(val=>{
if(val.nickName.indexOf(query)!=-1) result.push(val)
})
this.options = result
}
},
//用戶列表----endcss樣式：
<style>
.el-select-dropdown__list {
height: 100%;
overflow: hidden;
}
.select_up {
padding: 0 14px;
font-size: 14px;
position: absolute;
z-index: 99999;
background-color: white;
top: 0px;
width: 100%;
border-radius: 5px 5px 0 0;
::v-deep .el-button {
color: #bcbcbc;
font-size: 14px;
i {
font-size: 14px;
}
}
::v-deep .el-button:hover {
color: #409EFF;
}
.el-button+.el-button {
margin-left: 6px;
}
}
.select_list {
margin-top: 25px;
}
</style>完整組件
子組件代碼如下，請(qǐng)注意代碼注釋的講解：
1、props里面需定義value（雙向綁定默認(rèn)的變量，可自定義），父組件通過v-model綁定的fatherValue 會(huì)傳給子組件props的 value
2、子組件的input框添加@change事件觸發(fā)sendMsg，sendMsg向父組件傳遞change事件（雙向綁定默認(rèn)事件，可自定義），同時(shí)傳遞childValue的值
3、添加value的watch監(jiān)聽，當(dāng)value變化時(shí)傳遞最新值給childValue
<template>
<div>
<el-select style="width: 100% "
v-model="orgData"
size="small"
multiple
collapse-tags
filterable
placeholder="請(qǐng)選擇"
:filter-method="dataFilter"
@change="sendMsg()" >
<div class="select_up">
<el-button type="text" v-on:click="selectAll">
<i class="el-icon-circle-check" />
全選</el-button>
<el-button type="text" v-on:click="removeTag">
<i class="el-icon-close" />
清空</el-button>
<el-button type="text" v-on:click="selectReverse">
<i class="el-icon-copy-document" />
反選</el-button>
</div>
<div class="select_list">
<el-option
v-for="item in options"
:key="item.userName"
:label="item.nickName"
:value="item.userName">
</el-option>
</div>
</el-select>
</div>
</template>
<script>
export default {
props: {
value: {
type: Array,
required: []
},
userList: {
type: Array,
required: []
},
options: {
type: Array,
required: []
},
},
watch: {
//監(jiān)聽value變化（slect控件不是必要，暫時(shí)不明）
value(newValue, oldValue) {
this.orgData = newValue;
}
},
data() {
return {
orgData: [],//選中數(shù)據(jù)
}
},
methods: {
//用戶列表----start
//清空操作
removeTag() {
this.orgData = []
},
//全選操作
selectAll(val) {
this.options.map(item => {
if(!this.orgData.includes(item.userName)){
this.orgData.push(item.userName)
}
})
console.log(this.orgData)
},
//反選操作
selectReverse(val) {
val = []
this.options.map(item => {
let index = this.orgData.indexOf(item.userName);
//判斷現(xiàn)有選中數(shù)據(jù)是否包含如果不包含則進(jìn)行反選數(shù)據(jù)
if (index != -1) {
} else {
val.push(item.userName)
}
})
this.orgData = val
},
dataFilter(query) {
// this.value = val //給綁定值賦值
if(query == ''){
//val不存在還原數(shù)組
this.options= this.userList
}else{
let result = [] //存儲(chǔ)符合條件的下拉選項(xiàng)
this.userList.forEach(val=>{
if(val.nickName.indexOf(query)!=-1) result.push(val)
})
this.options = result
}
},
//用戶列表----end
sendMsg(){
//input是默認(rèn)雙向綁定事件，select控件也可以用input給父組件傳遞數(shù)據(jù)
this.$emit('input',this.orgData)
}
}
}
</script>
<style scoped lang="scss">
.el-select-dropdown__list {
height: 100%;
overflow: hidden;
}
.select_up {
padding: 0 14px;
font-size: 14px;
position: absolute;
z-index: 99999;
background-color: white;
top: 0px;
width: 100%;
border-radius: 5px 5px 0 0;
::v-deep .el-button {
color: #bcbcbc;
font-size: 14px;
i {
font-size: 14px;
}
}
::v-deep .el-button:hover {
color: #409EFF;
}
.el-button+.el-button {
margin-left: 6px;
}
}
.select_list {
margin-top: 25px;
}
</style>
父組件引用
<script>
import userSelect from '@/views/processEngine/unit/userSelect'
export default {
components: {
userSelect,deviceSelect
},
</script><el-form-item label="關(guān)聯(lián)人員">
<userSelect v-model="node.users" :userList="userList" :options="userList" ></userSelect>
</el-form-item>注意：文章來源：http://www.zghlxwxcb.cn/news/detail-496077.html
????????當(dāng)傳值的時(shí)候，v-model觸發(fā)了input事件， 而組件中的props屬性默認(rèn)就使用傳入的value值， ? 但是回傳的時(shí)候 ?是通過emit觸發(fā)的input事件。 ?如果沒有emit, 那么就不會(huì)觸發(fā)input ? 也就不會(huì)反向傳值文章來源地址http://www.zghlxwxcb.cn/news/detail-496077.html
到了這里，關(guān)于vue+el-select下拉實(shí)現(xiàn)：全選、反選、清空功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
