el-select多选模式下,同时获取name和id

91 阅读1分钟

微信截图_20240309144923.png

/*
    下拉数据结构
    Train_teacher_list: [
    { id: '选项1', name: '黄金糕' }, 
    { id: '选项2', name: '双皮奶' }, 
    { id: '选项3', name: '蚵仔煎' },
    { id: '选项4', name: '龙须面' }, 
    { id: '选项5', name: '北京烤鸭' }
    ]
*/

    <el-select  multiple remote collapse-tags @change="changeTrain_teacher" filterable>
          <el-option v-for="item in Train_teacher_list" :key="item.id" :label="item.name" :value="item.name"> </el-option>
    </el-select>

 changeTrain_teacher(value) {
      console.log(value);// ['双皮奶', '蚵仔煎']
      let idStr = "";
      
      for (let i = 0; i < value.length; i++) {
        this.Train_teacher_list.find((item) => {
          if (item.name == value[i]) {
            idStr += item.id + ",";
          }
        });
      }
      console.log(idStr.substring(0, idStr.length - 1));// 21040605,08101301
    },