el-select多个时，el-select筛选选中过的值，第二个el-select中过滤上一个选中的值

HuiRonmantic

已于 2025-04-15 16:43:19 修改

阅读量1.4k

点赞数

分类专栏： Vue技术栈大前端前端集锦888 文章标签： vue.js javascript 前端

于 2022-06-01 16:23:36 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_41346436/article/details/125085750

版权

Vue技术栈同时被 3 个专栏收录

66 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

大前端

35 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

前端集锦888

8 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文展示了如何在Vue.js中使用Element UI组件库创建多级联动的el-select选择框，并实现根据前一级选择的值过滤后一级的选择项。通过监听change事件，动态更新每个选择框可选项，确保已选过的值不会出现在后续级的选择项中。代码示例详细展示了数据处理逻辑，包括获取用户数据、回显已有选择、保存分配等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-select多个时，el-select筛选选中过的值，第二个el-select中过滤上一个选中的值

代码

DOM 
<tepmlate>
l-dialog
      title="校对分配"
      :visible.sync="dialogFormVisible"
      width="350px"
      @close="close"
    >
      <div id="dialogBox">
        <el-form id="domData" ref="formData" :model="params" label-width="70px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="选择框1:">
                <el-select
                  id="jiaoDui0"
                  ref="myselect"

了解本专栏

超级会员免费看