el-select下拉框选中数据进阶操作

帆仔哟

已于 2023-06-07 09:39:21 修改

阅读量363

点赞数

分类专栏： vue 文章标签： vue.js servlet java

于 2023-06-07 09:38:18 首次发布

本文链接：https://blog.csdn.net/FanZaiYo/article/details/131080616

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章描述了一个需求，即在Vue.js应用中，使用el-select组件实现多选下拉框。当选择某个加工工位后，其他工位的下拉框中不应再显示已被选择的工位，且所有工位的选中状态需同步。代码示例展示了如何在change事件中处理数据过滤，确保已选择的工位不会在其他下拉框中出现。

摘要由CSDN通过智能技术生成

需求：

将图一操作变更为图二，选中时选择框内显示选择选项，下拉框内不显示选中选项，并且多个下拉框同步共享（即加工工位选择过的，其他工位无法选择）

代码：

<el-form-item label="加工工位:" prop="processStationConf">
    <el-select v-model="form.processStationConf" multiple placeholder="请选择加工工位" clearable @change="searchSelect(form.processStationConf, form.pullOutStationConf, form.pullInStationConf, form.passStationConf)">
         <el-option v-for="item in NworkStationList" :label="item.workStationName"
:value="item.workStationCode" :key="item.workStationCode"></el-option>
    </el-select>
 </el-form-item>
<el-form-item label="拉出工位:" prop="processStationConf">
    <el-select v-model="form.pullOutStationConf" multiple placeholder="请选择拉出工位" clearable @change="searchSelect(form.processStationConf, form.pullOutStationConf, form.pullInStationConf, form.passStationConf)">
        <el-option v-for="item in NworkStationList" :label="item.workStationName"
:value="item.workStationCode" :key="item.workStationCode"></el-option>
    </el-select>
</el-form-item>

js：

/**
 * 每次改变数据，就会请求原有的数据，即：每次选择数据都会在原有数据上过滤
 */
searchSelect(a, b, c, d) {
    // 扩展运算符
    let val = [...a, ...b, ...c, ...d]
    listWorkStation().then(res => {
        //接受后端数据
        this.NworkStationList = res
        //对选择的数据进行遍历
        val.forEach(i => {
            //过滤出未被选择的数据
            this.NworkStationList = this.NworkStationList.filter(item => {
                return item.workStationCode != i
            })
        })
    })
},