vue+element多个相同的select不允许重复选择问题如何解决

3403771864 发布于2022-12-16 17:52 / 1025人阅读

　　当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不允许的父路径

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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