在 Element UI 的 Select 组件中,多选框的选择变化(change)事件可以通过监听 change 事件来获取选项的所有字段信息。

        当多选框选项发生改变时,会触发 change 事件,此时可以通过该事件的回调函数来获取选中的选项的所有字段信息。

示例:

html代码:

<el-form-item label="发送到用户" prop="feishufeishuUserValue" label-width="220px">
      <el-select style="width: 100%" v-model="form.feishuUserValue" value-key="form.feishuUserValue" filterable
            multiple placeholder="请选择" @change="selectUser">
            <el-option v-for="item in feishuUserList" :key="item.userId" :label="item.nickName" :value="item.userIds">
            </el-option>
      </el-select>
</el-form-item>

data数据:

data(){
    retuurn{
        feishuUserValue: [], //飞书用户
        
        feishuUserList: [],
    }
}

methods方法:

// 选择飞书用户
    selectUser(e) {
      this.selectedUserIds = e;
      this.form.employee.ids = e;
      // 从选项数组中获取选中的选项的完整信息
      const selectedOptions = this.feishuUserList.filter((item) =>
        e.includes(item.userIds)
      );
      console.log("选择", selectedOptions);
      this.form.dept = [];  //注意每次添加之前清空数组
      selectedOptions.forEach(item => {
        this.form.dept.push(item.deptIds);
      })
    },

        在上面的示例中,使用了 el-select 组件来创建一个多选框,并且监听了 change 事件。feishuUserList数组包含了所有的选项。

        当选项发生变化时,selectUser方法会被调用,传入选中的值的数组 selectedValues

        通过筛选 feishuUserList数组,找出被选中的选项的完整信息,并将其打印到控制台上。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐