当前位置:   article > 正文

【el-select】多选的简单用法_el-select multiple

el-select multiple

即使element用了很久,还是会有新的东西没用过

el-select的多选和日期组件有范围的el-date-picker很相似,都是绑定数组,然后给需要的字段再赋值

在这里插入图片描述
加上multiple属性即可,collapse-tags看自己需不需要

这个时候v-model绑定的是数组

<el-form-item label="发票类型">
   <el-select v-model="gvType" @change="gvtypeChange" multiple clearable :placeholder="$t('placeholderName.select')">
                              <el-option
                                v-for="item in voucher_type"
                                :key="item.dictCode"
                                :value="item.dictValue"
                                :label="item.dictLabel"
                              ></el-option>
                            </el-select>
                          </el-form-item>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
data(){
return{
      gvType: [], //多选

}
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

change事件中给你需要的字段赋值,将数组转换成字符串就是后端需要的格式

   gvtypeChange() {
      this.queryParams.gvType = this.gvType.toString()
    },
  • 1
  • 2
  • 3

在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/107251
推荐阅读