elementUI中el-select 选中获取多个数据值

最新推荐文章于 2025-03-18 09:45:21 发布

Muchen灬

最新推荐文章于 2025-03-18 09:45:21 发布

阅读量5.5k

点赞数

分类专栏： ElementUI

本文链接：https://blog.youkuaiyun.com/qq_40976321/article/details/119758191

版权

ElementUI 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何在Element UI的el-select组件中实现多选功能，用户选择套餐后获取对应的packageName，并更新ruleForm对象。通过示例代码和selectChanelSel方法展示了数据绑定和筛选过程。

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

el-select 选中获取多个数据值

<el-select v-model="ruleForm.packageId"  filterable remote clearable reserve-keyword  :loading="shopLoading" 
   placeholder="请选择代理商套餐" size="small" style="width:360px"  @change="selectChanelSel">
   <el-option v-for="item in channelOptions" :key="item.id" :label="item.packageName"  :value="item.id" />
</el-select>

 ruleForm: {
   agentId: null,
   agentName: "",
   packageId: null,
   packageName: ""
},

channelOptions:[
     {
        "id": 3,
        "packageName": "3",
        "excessOrderCommission": 2,
        "status": 2,
        "effectiveStartTime": "2021-08-21 00:00:00",
        "effectiveEndTime": "2021-08-31 23:59:59",
        "blevelRebate": 2,
        "clevelRebate": 2,
        "alevelRebate": 3
      },
      {
        "id": 6,
        "packageName": "代理商套餐B",
        "excessOrderCommission": 2,
        "status": 1,
        "effectiveStartTime": "2021-08-21 00:00:00",
        "effectiveEndTime": "2021-08-31 23:59:59",
        "blevelRebate": 2,
        "clevelRebate": 2,
        "alevelRebate": 3
      }
]

  //选中后传id值进行 查询获取对应数据
  selectChanelSel(e) {
      let packName = "";
      this.channelOptions.forEach(item=>{
        if(item.id == e){
            packName = item.packageName;
        }
      })
      console.log("packName->", packName);
      this.ruleForm.packageName = packName;
      console.log(' ruleForm ',this.ruleForm);
 },

效果展示：
在这里插入图片描述