vue+element多個相同的select不允許重復選擇問題如何解決

3403771864 發布于2022-12-16 17:52 / 1090人閱讀

　　當element多個相同的select不允許重復選擇，這樣怎么處理？現在我們看看具體代碼:

　　<template>
　　<div>
　　<div>
　　<el-select v-model="value1" placeholder="請選擇">
　　<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="請選擇">
　　<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="請選擇">
　　<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: '選項1',
　　label: '黃金糕'
　　}, {
　　id: 2,
　　value: '選項2',
　　label: '雙皮奶',
　　disabled: true
　　}, {
　　id: 3,
　　value: '選項3',
　　label: '蚵仔煎'
　　}, {
　　id: 4,
　　value: '選項4',
　　label: '龍須面'
　　}, {
　　id: 5,
　　value: '選項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 //需要展開內容，顯示與隱藏之間切換
　　},
　　toDetail(item) {
　　this.$router.push('/helpDetails/' + item)
　　},
　　},
　　mounted() {
　　}
　　}
　　</script>

　　<style src="@/assets/css/card.scss"></style>

　　動態循環出的多個select 不能重復選擇相同的數據

　　先看效果圖

　　代碼如下：

　　<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":"選項1"
　　},{
　　"id":2,
　　"name":"選項2"
　　},{
　　"id":3,
　　"name":"選項3"
　　}],
　　}
　　},
　　methods: {
　　onChangeProgram() {
　　this.selectIdsArr = [];
　　for (const item of this.parArr) {
　　if (item.id) {
　　this.selectIdsArr.push(item.id);
　　}
　　}
　　},
　　},
　　}
　　</script>

　　以上就是全部內容，歡迎大家關注后續更多精彩內容。

云服務器 GPU云服務器解決TPM不支持問題不允許的字符表中的字段也不相同 asp不允許的父路徑

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/128435.html

開發中遇到的問題總結

摘要：獲取字符串中出現次數最多的字符。去掉字符串中的所有空格中對象數組按對象屬性排序 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...

wenshi11019 2019-08-23 16:03 評論0 收藏0
開發中遇到的問題總結

摘要：獲取字符串中出現次數最多的字符。去掉字符串中的所有空格中對象數組按對象屬性排序 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...

Yuqi 2019-08-30 15:56 評論0 收藏0
如何實現一個這樣的級聯組件

摘要：封裝組件系列文章如何實現一個這樣的級聯組件組件背景根據產品原型實現一個級聯組件，下面看演示圖應用場景很多，如后臺管理系統，旅游系統，廣告投放系統，營銷系統等，現在流行，，三大框架，下面看看怎么使用實現實現邏輯產品經理的評審功能需求如下根據大 Vue封裝組件系列文章如何實現一個這樣的級聯組件組件背景根據產品原型實現一個級聯組件，下面看演示圖 showImg(https://i.lo...

daydream 2019-08-26 10:11 評論0 收藏0
手摸手，帶你用vue擼后臺系列三(實戰篇)

摘要：社區的認可目前已經是相關最多的開源項目了，體現出了社區對其的認可。監聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺系列一(基礎篇)系類文章二：手摸手，帶你用vue擼后臺系列二(登錄權限篇)系類文章三：手摸手，帶你用vue擼后臺系列三(實戰篇）系類文章四：手摸手，帶你用vue擼后臺系列...

Channe 2019-08-20 17:15 評論0 收藏0