• 多选


      div()
        div()
          p 选择平台
            el-form-item()
              el-checkbox( label="全部", :indeterminate="isIndeterminate", v-model="checkAll", @change="handleCheckAllChange")
          div()
            el-form-item
                                      el-checkbox-group( v-model="popupform.receivers", @change="handleCheckedCitiesChange")
                                            el-checkbox( v-for="city in cities", :label="city.id", :key="city.id") {{city.name}}
     
     
      return {
                cities: [],
                checkAll: false,
                isIndeterminate: true,

                popupform: {
         receivers: [],
        }
      }
      
     mounted() {
            this.getDataList();
        },
        methods: {
            handleCheckAllChange(val) {
                // const _receivers = val ? this.cities.map(key => key.id) : [];
                // this.$set(this.popupform, 'receivers', _receivers)
        //绑定的值为 id ,则 this.cities.map(key => key.id)  为 id 
                this.popupform.receivers = val ? this.cities.map(key => key.id) : [];
                console.log(this.cities.map(key => key.id))
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange(value) {
       // value 是 :label="city.id" 绑定的值
                const checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            },
            async getDataList() {
        //请求数据
                const result = await api.accountRangeList();
                this.cities = result.sellerTypeList;
            }
     }
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
  • 相关阅读:
    【GitHub】上传代码通用操作等(附下载单个文件夹或文件)
    【Git】之分支合并命令
    【FFmpeg】之Mac系统爬取所有M3U8视频下载方法
    i2c超时
    linux下串口调试
    cgminer分析
    i2c驱动理解
    STM32(三十七)SPI读取W25Q128flash的厂商ID、设备ID以及读写数据(硬件SPI)
    驱动静态和动态加载
    I2C基本原理及对I2C Adapter的理解
  • 原文地址:https://www.cnblogs.com/J-Luck/p/13361522.html
Copyright © 2020-2023  润新知