【项目需求】:两个下拉框之间选项关联

简介: 一.利用Option Group Attributes中的disabled属性实现二.利用下拉框的@change事件

一.利用Option Group Attributes中的disabled属性实现

<el-select v-model="value1" placeholder="请选择">
    <el-option v-for="item in options" :key="item.value" :label="item.label"         
        :value="item.value":disabled="item.value == value2">
    </el-option>
</el-select>
<el-select v-model="value2" placeholder="请选择">
    <el-option v-for="item in options" :key="item.value" :label="item.label"     
        :value="item.value":disabled="item.value == value1">
    </el-option>
</el-select>


data () {
        return {
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶',
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            value1: '',
            value2: '',
        };
    },


二.利用下拉框的@change事件

<el-select v-model="value1" placeholder="请选择" @change="value1Change">
   <el-option v-for="item in value2Options" :key="item.value" :label="item.label" 
      :value="item.value">
   </el-option>
</el-select>
<el-select v-model="value2" placeholder="请选择" @change="value2Change">
   <el-option v-for="item in value1Options" :key="item.value" :label="item.label"         
      :value="item.value">
   </el-option>
</el-select>


data () {
        return {
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶',
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            value1: '',
            value2: '',
            value1Options: [],
            value2Options: [],
        };
    },
    mounted () {
        this.value1Options = this.value2Options = this.options;
    },
    methods: {
        value1Change (val) {
            console.log(val);
            this.value1Options = this.options.filter(item => {
                return item.value != val;
            })
            console.log(this.value1Options);
        },
        value2Change (val) {
            this.value2Options = this.options.filter(item => {
                return item.value != val;
            })
        },
    },

相关文章
|
3月前
|
Windows
该文件没有与之关联的应用来执行该操作。请安装应用,若已经安装应用,请在“默认应用设置“页面中创建关联
【10月更文挑战第22天】当你遇到“该文件没有与之关联的应用来执行该操作”的提示时,通常是因为文件类型未关联应用或文件损坏。解决方法包括:1. 确定文件类型并安装合适的应用程序,如Microsoft Office、Adobe Acrobat Reader等;2. 如果已安装应用,进入系统设置关联文件类型;3. 检查文件完整性,重新下载或验证文件格式。
2027 1
|
5月前
|
JavaScript 前端开发
Vue实现Element UI框架的自定义输入框或下拉框在输入时对列表选项进行过滤,以及右键列表选项弹出菜单进行删除
本文介绍了如何在Vue框架结合Element UI库实现自定义输入框或下拉框,在输入时对列表选项进行过滤,并支持右键点击列表选项弹出菜单进行删除的功能。
129 0
|
7月前
|
JavaScript 前端开发
buildadmin实现多级关联下拉效果
buildadmin实现多级关联下拉效果
47 0
【分享】下拉选项,远程获取数据,根据条件设置颜色,并按颜色排序
有时候需要用下拉选项来只管展示数据的(库存)剩余情况,我拿宜搭下拉选择组件的颜色属性来做展示(大家可以举一反三)
451 1
|
存储 消息中间件 缓存
关于字典项(下拉列表)在前后端的实践思考
最近接触了一点公司的后端代码,刚好自己有非常多的疑问,带着这些疑问,我就来看看公司后端的代码是如何实现的。由于工作中表单的录入工作相对频繁,而且有非常多的下拉选项,所以就先来看看字典项目的获取。
529 0
|
JavaScript
【经验分享】单选/下拉单选选项数据源为动态值的时候控制组件状态
单选/下拉单选的选项为动态值的时候,实现类似于关联选项的功能。
204 0
“关联表单”组件文本数据筛选只支持包含条件的解决方案
在“关联表单”中使用数据筛选功能筛选文本时条件只有”包含“,此文章通过增加一个”下拉单选“组件,变相解决这个问题。
208 0
|
前端开发 测试技术 数据库
【测试平台开发】十七、接口编辑页面实现下拉级联选择,绑定接口所属模块
【测试平台开发】十七、接口编辑页面实现下拉级联选择,绑定接口所属模块
|
小程序 开发者
小程序__02--navigationBarTitleText配置子页面标题,依旧显示默认标题,子页面配置不显示
navigationBarTitleText配置子页面标题,依旧显示默认标题,子页面配置不显示
|
前端开发
前端工作小结88-定义有对话框的按钮
前端工作小结88-定义有对话框的按钮
102 0