element ui中select多选框change选择获取选项的所有字段信息-Toy模板网

这篇具有很好参考价值的文章主要介绍了element ui中select多选框change选择获取选项的所有字段信息。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在 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数组，找出被选中的选项的完整信息，并将其打印到控制台上。文章来源地址https://www.toymoban.com/news/detail-738935.html

到了这里，关于element ui中select多选框change选择获取选项的所有字段信息的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！