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

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);
 },

效果展示：