這個(gè)需求有點(diǎn)多選與單選結(jié)合的意思，同一父級(jí)下的子節(jié)點(diǎn)單選，又可以選擇多個(gè)不同父級(jí)下的節(jié)點(diǎn)。這里以兩級(jí)為例，實(shí)現(xiàn)一個(gè)在多選模式下，同一父級(jí)下最多只能選中一個(gè)子級(jí)的級(jí)聯(lián)選擇器。
1、隱藏父級(jí)節(jié)點(diǎn)處的CheckBox
多選模式下可以通過(guò)勾選父級(jí)一鍵選中所有的子級(jí)，而每個(gè)父級(jí)下可能有多個(gè)子級(jí)，也可能只有一個(gè)，起初我想的是根據(jù)本次選擇選中的個(gè)數(shù)分類討論，但討論起來(lái)比較繁瑣，所以最后決定直接把父級(jí)的checkbox隱藏掉，不讓用戶直接勾選父級(jí)，減少了很多不必要的麻煩。
.hide {
.el-cascader-menu:first-of-type {
.el-cascader-node {
.el-checkbox {
display: none;
}
}
}
}這里需要注意的一點(diǎn)是hide類名必須使用級(jí)聯(lián)選擇器中的popper-class來(lái)添加自定義浮層類名的。
?2、對(duì)選中的項(xiàng)進(jìn)行篩選限制，先找到本次新增的項(xiàng)，和新增前的值進(jìn)行對(duì)比，看是否存在與本次新增的項(xiàng)同屬于一個(gè)父級(jí)的，如果存在則刪除之前已經(jīng)存在的那一項(xiàng)，留下本次新增的。
這里的解決花費(fèi)了我很多時(shí)間，因?yàn)橐婚_(kāi)始想著直接操作級(jí)聯(lián)選擇器綁定值，刪除掉不要的那一項(xiàng)就可以了，但問(wèn)題出現(xiàn)了。綁定的值確實(shí)達(dá)到了我想要的效果（即刪除之前已經(jīng)存在的那一項(xiàng)，留下本次新增的），但級(jí)聯(lián)面板中右側(cè)的部分（即子節(jié)點(diǎn)部分），會(huì)自動(dòng)刷新跳轉(zhuǎn)到第一個(gè)父級(jí)下的子級(jí)面板，用戶體驗(yàn)差，嘗試解決，沒(méi)解決掉。。。
最后，選擇從另外一個(gè)角度來(lái)實(shí)現(xiàn)，如果存在與本次新增的項(xiàng)同屬于一個(gè)父級(jí)的，則直接通過(guò)js觸發(fā)點(diǎn)擊事件，取消勾選之前已經(jīng)存在的那一項(xiàng)。
有了思路以后就可以一步一步來(lái)實(shí)現(xiàn)了。
首先找到本次新增的這一項(xiàng)，由于組件庫(kù)文檔中級(jí)聯(lián)選擇器這一塊并沒(méi)有提供相關(guān)的辦法獲取到最新選擇的一項(xiàng)，只能拿到已選擇的所有值，并且級(jí)聯(lián)選擇器新增的項(xiàng)并不是直接push到綁定值的末尾，而是按選項(xiàng)值在頁(yè)面上展示的順序添加的，所以只能手動(dòng)去對(duì)比查找，需要定義一個(gè)preValue數(shù)組來(lái)存儲(chǔ)上一次的值。
let newIndex;
let i = 0, j = 0;
while (i < val.length && j < this.preValue.length) {
if (val[i][0] === this.preValue[j][0] && val[i][1] === this.preValue[j][1]) {
i++;
j++;
} else {
//添加在中間的情況
newIndex = i;
break;
}
}
//添加在末尾的情況
if (j === this.preValue.length) {
newIndex = i;
}找到新增項(xiàng)后，再去對(duì)比在此之前是否添加過(guò)于新增項(xiàng)同一父級(jí)下的其他子級(jí)。
let delIndex = val.findIndex((item, index) => index !== newIndex && item[0] === val[newIndex][0]);
如果存在的話，接下來(lái)就需要去觸發(fā)相應(yīng)的點(diǎn)擊事件取消這一項(xiàng)的勾選。
我們先來(lái)觀察一下html結(jié)構(gòu)，右側(cè)面板下的各個(gè)li標(biāo)簽的id值其實(shí)就是右側(cè)面板id值加上：'-'+index，因此我們只需要拿到右側(cè)面板id值就能知道對(duì)應(yīng)選項(xiàng)的id值，再觸發(fā)li標(biāo)簽的孩子標(biāo)簽中的checkbox的點(diǎn)擊事件就可以了。
?右側(cè)面板id通過(guò)級(jí)聯(lián)選擇器的引用可以拿到，另外需要求得取消勾選選項(xiàng)的index，通過(guò)與級(jí)聯(lián)選擇器選項(xiàng)值對(duì)比得到。
let cancelIndex;
for (let i = 0; i < this.options.length; i++) {
if (this.options[i].value === val[delIndex][0]) {
for (let j = 0; j < this.options[i].children.length; j++) {
if (this.options[i].children[j].value === val[delIndex][1]) {
cancelIndex = j;
break;
}
}
break;
}
}獲取id值。
this.$nextTick(() => {
let panelId = this.$refs.cascade.panel.$refs.menu[1].$el.id; //其中menu[1]表示右側(cè)的面板 menu[0]即為左側(cè)的面板
let liId = document.getElementById(panelId + '-' + cancelIndex);
liId.children[0].click();
})到這里就基本完成了這個(gè)需求，其實(shí)不難，但因?yàn)橐婚_(kāi)始自己的思路（直接刪值）實(shí)現(xiàn)起來(lái)出現(xiàn)了問(wèn)題，想著去解決花費(fèi)了很多時(shí)間，也沒(méi)解決掉，最后和同事討論換一種思路很快就實(shí)現(xiàn)了，所以思路變通是非常重要的~
3、完整代碼文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-428506.html
<template>
<div class='test'>
<el-cascader
class='cascader'
:options='options'
:props='props'
clearable
:popper-class="'hide'"
@change='handleChange'
ref='cascade'
></el-cascader>
</div>
</template>
<script>
export default {
name: 'Cascader',
data() {
return {
props: { multiple: true, expandTrigger: 'click' },
options: [{
value: 1,
label: '杭州',
children: [{
value: 3,
label: '西湖'
}, {
value: 4,
label: '錢塘'
}, {
value: 7,
label: '上城'
}]
}, {
value: 2,
label: '成都',
children: [{
value: 5,
label: '青羊'
}, {
value: 6,
label: '武侯'
}]
}],
preValue:[]
}
},
methods:{
handleChange(val){
if (this.preValue.length > 0 && val.length > this.preValue.length) {
let newIndex;
let i = 0, j = 0;
while (i < val.length && j < this.preValue.length) {
if (val[i][0] === this.preValue[j][0] && val[i][1] === this.preValue[j][1]) {
i++;
j++;
} else {
//添加在中間的情況
newIndex = i;
break;
}
}
//添加在末尾的情況
if (j === this.preValue.length) {
newIndex = i;
}
let delIndex = val.findIndex((item, index) => index !== newIndex && item[0] === val[newIndex][0]);
if (delIndex >= 0) {
// 取消選擇的節(jié)點(diǎn)
let cancelIndex;
for (let i = 0; i < this.options.length; i++) {
if (this.options[i].value === val[delIndex][0]) {
for (let j = 0; j < this.options[i].children.length; j++) {
if (this.options[i].children[j].value === val[delIndex][1]) {
cancelIndex = j;
break;
}
}
break;
}
}
this.$nextTick(() => {
let panelId = this.$refs.cascade.panel.$refs.menu[1].$el.id; //其中menu[1]表示右側(cè)的面板 menu[0]即為左側(cè)的面板
let liId = document.getElementById(panelId + '-' + cancelIndex);
liId.children[0].click();
})
val[delIndex] = '';
val = val.filter(item => item !== '');
}
}
this.preValue = val;
}
}
};
</script>
<style lang='less'>
.test {
text-align: center;
margin-top: 200px;
.title {
display: block;
margin-bottom: 20px;
}
.cascader {
.el-input__inner {
width: 362px;
}
.el-cascader__tags {
display: flex;
flex-wrap: nowrap;
overflow-y: overlay;
margin-left: 2px;
}
.el-cascader__tags::-webkit-scrollbar {
width: 0;
height: 3px;
}
/*定義滾動(dòng)條軌道 內(nèi)陰影+圓角*/
.el-cascader__tags::-webkit-scrollbar-track {
background-color: rgba(186, 203, 227, 0.3);
}
/*定義滑塊 內(nèi)陰影+圓角*/
.el-cascader__tags::-webkit-scrollbar-thumb {
background-color: #B3C2D7;
}
}
}
.hide {
.el-cascader-menu:first-of-type {
.el-cascader-node {
.el-checkbox {
display: none;
}
}
}
}
</style>如果大家有更好的解決辦法或優(yōu)化，歡迎評(píng)論區(qū)討論~文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-428506.html
到了這里，關(guān)于Element UI級(jí)聯(lián)選擇器 多選模式下，實(shí)現(xiàn)同一父級(jí)下最多只能選中一個(gè)子級(jí)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
