Element UI Select选择器实现多个下拉框中的一个选择某项后其余下拉框无法选择(完善版本)

最新推荐文章于 2024-03-12 10:53:39 发布

天外来鹿

最新推荐文章于 2024-03-12 10:53:39 发布

阅读量3.2k

点赞数 1

分类专栏： vue 文章标签： javascript 前端 elementui vue js

原文链接：https://blog.csdn.net/qq_37570945/article/details/110947627

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果预览

Element UI Select选择器实现多个下拉框中的一个选择某项后其余下拉框无法选择效果预览

源码示例

<template>
    <el-table :data="tableData" border stripe style="width: 100%" empty-text="暂无城市亲戚数量">
        <el-table-column prop="date" label="城市(多选)">
            <template slot-scope="scope">
                <el-select v-model="scope.row.citys" multiple placeholder="请选择城市" @change="changeSelect">
                    <el-option v-for="(item,key) in areas" :key="key" :label="item.value" :value="item.value" :disabled="!scope.row.citys.includes(item.value) && publicAreas.includes(item.value)"></el-option>
                </el-select>
                <input type="hidden" :name="'areas_dispatchs[' + scope.$index + '][citys][]'" v-model="item" v-for="item in scope.row.citys">
            </template>
        </el-table-column>
        <el-table-column label="亲戚数量" width="180">
            <template slot-scope="scope">
                <el-input v-model="scope.row.people_num" placeholder="请填写亲戚数量"></el-input>
                <input type="hidden" :name="'areas_dispatchs[' + scope.$index + '][people_num]'" v-model="scope.row.people_num">
            </template>
        </el-table-column>
        <el-table-column align="right" width="80">
            <template slot="header" slot-scope="scope">
                <el-button size="small" @click="addTable">添加</el-button>
            </template>
            <template slot-scope="scope">
                <el-button type="danger" size="small" @click="deleteTable(scope.$index)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

export default {
    data(){
        return {
            //可选项
            areas: [],
            //公共选项列表
            publicAreas: [],
            //表格初始数据
            tableData: [
                {citys: ["长沙市","湘潭市"],people_num: '10'},
                {citys: ["邵阳市","衡阳市"],people_num: '12'}
            ]
        }
    },
    created() {
        /* 初始化可选项 */
        let areas = [],
            lev = ["长沙市","湘潭市","株洲市","衡阳市","邵阳市","郴州市","广州市","东莞市"];
        for(let i in lev){
            areas.push({ value: lev[i], disabled: false })
        }
        this.areas = areas;
        /* 初始化表格数据，得到公共选项列表'publicAreas' */
        if(this.tableData.length > 0){
            let publicArr = [];
            for(let m in this.tableData){
                publicArr = [...publicArr, ...this.tableData[m].citys]
            }
            this.publicAreas = publicArr;
        }
    },
    methods: {
        changeSelect(e){
            /* 监听下拉框值的变化，实时更新公共选项列表（选项的添加与删除） */
            let arr = [];
            for(let i in this.tableData){
                arr = [...arr, ...this.tableData[i].citys]
            }
            this.publicAreas = arr;
        },
        addTable(){
            /* 添加表格行 */
            this.tableData.push({citys: [],people_num: ''});
        },
        deleteTable(e){
            /* 删除表格某行，实时更新公共选项列表 */
            this.tableData.splice(e,1);
            let publicArr = [];
            for(let m in this.tableData){
                publicArr = [...publicArr, ...this.tableData[m].citys]
            }
            this.publicAreas = publicArr;
        }
    }
}