vue element下拉框加全选

最新推荐文章于 2024-07-24 13:53:49 发布

新老农

最新推荐文章于 2024-07-24 13:53:49 发布

阅读量440

点赞数 1

文章标签： vue.js 前端 javascript

懒虫

本文链接：https://blog.csdn.net/xcbzsy/article/details/130891237

版权

在这里插入图片描述

 <el-form-item label="国别" prop="nation_id">
    <el-select v-model="nation_id" clearable multiple filterable placeholder="请选择国别" style="width: 100%;" @change="changeNation">
         <el-checkbox
             v-model="checked"
             @change='selectAll'
             style="margin-left:20px">
             全选
         </el-checkbox>
         <el-option
             v-for="item in nationList"
             :key="item.id"
             :label="item.name"
             :value="item.id"
         >
             <span style="float: left; font-size: 15px;">${ item.name } ${ item.cname }</span>
             <span style="float: left; color: #8492a6; font-size: 15px" v-if="item.flag==1">&nbsp;&nbsp;正单</span>
             <span style="float: left; color: #8492a6; font-size: 15px" v-if="item.flag==2">&nbsp;&nbsp;邮购单</span>
         </el-option>
     </el-select>
 </el-form-item>

 nation_id: [],  //国别
 checked: false,//全选国别
                     
  // 国别全选
  changeNation(val){
      if (val.length === this.nationList.length) {
          this.materialTSCLForm.checked = true
      } else {
          this.materialTSCLForm.checked = false
      }
  },
  selectAll() {
      this.materialTSCLForm.nation_id = []
      if (this.materialTSCLForm.checked) {
          this.nationList.map((item) => {
              this.materialTSCLForm.nation_id.push(item.id)
          })
      } else {
          this.materialTSCLForm.nation_id = []
      }
      this.$emit('changeNation', {val:this.materialTSCLForm.nation_id,index:this.index});
  },