資訊專欄INFORMATION COLUMN
當(dāng)element多個(gè)相同的select不允許重復(fù)選擇，這樣怎么處理？現(xiàn)在我們看看具體代碼:
<template> <div> <div> <el-select v-model="value1" placeholder="請(qǐng)選擇"> <el-option v-for="item in haha" :key="item.id" :label="item.label" :value="item.id" :disabled="disabledChoose(item)"> </el-option> </el-select> <el-select v-model="value2" placeholder="請(qǐng)選擇"> <el-option v-for="item in haha" :key="item.id" :label="item.label" :value="item.id" :disabled="disabledChoose(item)"> </el-option> </el-select> <el-select v-model="value3" placeholder="請(qǐng)選擇"> <el-option v-for="item in haha" :key="item.id" :label="item.label" :value="item.id" :disabled="disabledChoose(item)"> </el-option> </el-select> </div> </div> </template>
<script>
export default {
data() {
return {
value1: '',
value2: '',
value3: '',
haha: [{
id: 1,
value: '選項(xiàng)1',
label: '黃金糕'
}, {
id: 2,
value: '選項(xiàng)2',
label: '雙皮奶',
disabled: true
}, {
id: 3,
value: '選項(xiàng)3',
label: '蚵仔煎'
}, {
id: 4,
value: '選項(xiàng)4',
label: '龍須面'
}, {
id: 5,
value: '選項(xiàng)5',
label: '北京烤鴨'
}],
}
},
computed: {
disabledChoose(item) {
return function (item) {
let findItemIndex = [this.value1, this.value2, this.value3].findIndex(item2 => item2 == item.id);
console.log('findItemIndex', findItemIndex)
let newArr = [this.value1, this.value2, this.value3].splice(findItemIndex, 1);
console.log('newArr', newArr)
return newArr.includes(item.id);
}
}
},
methods: {
showToggle(item) {
item.isSubShow = !item.isSubShow //需要展開內(nèi)容，顯示與隱藏之間切換
},
toDetail(item) {
this.$router.push('/helpDetails/' + item)
},
},
mounted() {
}
}
</script><style src="@/assets/css/card.scss"></style>
動(dòng)態(tài)循環(huán)出的多個(gè)select 不能重復(fù)選擇相同的數(shù)據(jù)
先看效果圖
代碼如下：
<template>
<div v-for="(parItem,index) in parArr" :key="parItem.guid">
<Select v-model="parItem.id" @on-change="onChangeProgram">
<Option v-for="(subItem,idx) in programList" :key="subItem.id" :data-index='idx'
v-show="parItem.id == subItem.id || !selectIdsArr.includes(subItem.id)"
:value="subItem.id> {{subItem.name}}</Option>
</Select>
</div>
</template> <script>
export default {
data() {
return {
parArr:[{guid:'ffffddd',id:null,},{guid:'eeeee',id:null,},{guid:'ffff',id:null,}],
selectIdsArr:[],
programList:[{
"id":1,
"name":"選項(xiàng)1"
},{
"id":2,
"name":"選項(xiàng)2"
},{
"id":3,
"name":"選項(xiàng)3"
}],
}
},
methods: {
onChangeProgram() {
this.selectIdsArr = [];
for (const item of this.parArr) {
if (item.id) {
this.selectIdsArr.push(item.id);
}
}
},
},
}
</script>以上就是全部?jī)?nèi)容，歡迎大家關(guān)注后續(xù)更多精彩內(nèi)容。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://hztianpu.com/yun/128435.html
摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對(duì)象數(shù)組按對(duì)象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...
摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對(duì)象數(shù)組按對(duì)象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...
摘要：封裝組件系列文章如何實(shí)現(xiàn)一個(gè)這樣的級(jí)聯(lián)組件組件背景根據(jù)產(chǎn)品原型實(shí)現(xiàn)一個(gè)級(jí)聯(lián)組件，下面看演示圖應(yīng)用場(chǎng)景很多，如后臺(tái)管理系統(tǒng)，旅游系統(tǒng)，廣告投放系統(tǒng)，營(yíng)銷系統(tǒng)等，現(xiàn)在流行，，三大框架，下面看看怎么使用實(shí)現(xiàn)實(shí)現(xiàn)邏輯產(chǎn)品經(jīng)理的評(píng)審功能需求如下根據(jù)大 Vue封裝組件系列文章 如何實(shí)現(xiàn)一個(gè)這樣的級(jí)聯(lián)組件 組件背景 根據(jù)產(chǎn)品原型實(shí)現(xiàn)一個(gè)級(jí)聯(lián)組件，下面看演示圖 showImg(https://i.lo...
摘要：社區(qū)的認(rèn)可目前已經(jīng)是相關(guān)最多的開源項(xiàng)目了，體現(xiàn)出了社區(qū)對(duì)其的認(rèn)可。監(jiān)聽事件手動(dòng)維護(hù)列表這樣我們就簡(jiǎn)單的完成了拖拽排序。 完整項(xiàng)目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺(tái) 系列一(基礎(chǔ)篇)系類文章二：手摸手，帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇)系類文章三：手摸手，帶你用vue擼后臺(tái) 系列三(實(shí)戰(zhàn)篇）系類文章四：手摸手，帶你用vue擼后臺(tái) 系列...
閱讀 774·2023-03-27 18:33
閱讀 1005·2023-03-26 17:27
閱讀 891·2023-03-26 17:14
閱讀 833·2023-03-17 21:13
閱讀 757·2023-03-17 08:28
閱讀 2239·2023-02-27 22:32
閱讀 1635·2023-02-27 22:27
閱讀 2596·2023-01-20 08:28
