el-select下拉框多选处理选中数据

这篇博客详细介绍了如何在 Vue.js 应用中利用 Element UI 的 `el-select` 组件实现多选下拉框功能。通过设置 `multiple` 和 `clearable` 属性,结合 `v-model` 和 `@change` 事件监听用户的选择变化。同时,展示了如何处理多选值,并通过 `handleChange` 方法更新 `form.custodianList`。博客还提供了一种优化过的代码实现,使用 `Array.find` 方法减少循环次数,提高效率。

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

在这里插入图片描述
el-select下拉框设置多选属性:multiple

<el-col :span="8">
   <el-form-item label="保管员"  label-width="120px">
      <el-select
        v-model="form.custodianList"
        :disabled="isDetail" 
        :placeholder="isDetail ? '' : '请选择保管员'"
        style="width: 100%"
        multiple  
        clearable
        @change="(value) => handleChange('custodianList', value)"
      >
        <el-option
          v-for="item in custodianList"
          :key="item.partyCode"
          :label="item.partyName"
          :value="item.partyCode"
        />
      </el-select>
    </el-form-item>
 </el-col>
** //处理保管员,保管员,装卸工多选
    handleChange(str, val) {
      let that = this
      let arr = []
      做出两种方法,逻辑都是一样的
      第一种是循环两次:代码如下
      // for (let i = 0; i < val.length; i++) {
      //   for (let j = 0; j < that.custodianList.length; j++) {
      //     if (val[i] === that.custodianList[j].code) {
      //       arr.push(that.custodianList[j])
      //     }
      //   }
      // }
	  //这里的一层if是因为三个下拉框调取的一个方法  用参数str区分不同的下拉框
      if (str === 'custodianList') { 
      第二种是使用一层for加一个Array.find方法
        for (let i in val) {
          that.custodianList.find((item) => {
            if (item.partyCode === val[i]) {
              arr.push(item)
            }
          })
        }
        that.form.custodianList = arr
      } 
    },**
对于Vue3和ElementUIel-select下拉框,你可以通过以下步骤来回显数据: 1. 在data中定义一个数组selectedOptions,用于存储择的项的值。 2.el-select的v-model绑定selectedOptions数组,实现功能。 3. 设置el-selectmultiple属性为true,启用模式。 4.el-option的v-model绑定selectedOptions数组,表示该项是否被选中。 5. 在mounted生命周期函数中初始化selectedOptions数组,将需要回显的项的值添加到该数组中。 以下是示例代码: ```html <template> <el-select v-model="selectedOptions" multiple placeholder="请择" style="width: 200px;"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :selected="selectedOptions.indexOf(item.value) > -1"> </el-option> </el-select> </template> <script> export default { data() { return { selectedOptions: [], // 存储择的项的值 options: [ // 下拉框项 { value: 'option1', label: '项一' }, { value: 'option2', label: '项二' }, { value: 'option3', label: '项三' }, { value: 'option4', label: '项四' } ] }; }, mounted() { // 初始化selectedOptions数组,将需要回显的项的值添加到该数组中 this.selectedOptions = ['option1', 'option2']; } }; </script> ``` 在上述代码中,我们使用selectedOptions数组来存储择的项的值,然后在el-select的v-model中绑定该数组,实现功能。我们还设置了el-selectmultiple属性为true,启用模式。在el-option中,我们使用v-model绑定selectedOptions数组,表示该项是否被选中。在mounted生命周期函数中,我们初始化selectedOptions数组,将需要回显的项的值添加到该数组中。这样,下拉框就可以回显数据了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值