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

原创已于 2023-01-10 16:37:34 修改 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

于 2021-06-24 14:04:33 首次发布

Vue+Element 专栏收录该内容

7 篇文章

订阅专栏

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

在这里插入图片描述
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
      } 
    },**