首页 > 其他分享 >vue中el-checkbox全选、反选、多选

vue中el-checkbox全选、反选、多选

时间:2023-04-17 09:44:07浏览次数:43  
标签:el checkbox false val 反选 length cities provinceList checkedCities

<template>
  <div>
    <el-checkbox
      v-model="checkAll"
      @change="handleCheckAllChange"
      :indeterminate="isIndeterminate"
      >全选</el-checkbox
    >
    <el-checkbox v-model="checkInvert" @change="handleInvertCheckChange"
      >反选</el-checkbox
    >
    <el-checkbox-group
      v-model="checkedCities"
      @change="handleCheckedCitiesChange"
    >
      <el-checkbox v-for="city in cities" :label="city" :key="city">{{
        city
      }}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
const cityOptions = ["上海", "北京", "广州", "深圳"];
export default {
  data() {
    return {
      checkAll: false,
      checkInvert: false,
      checkedCities: ["上海", "北京"],
      cities: cityOptions,
      isIndeterminate: true,
    };
  },
  methods: {
    // 全选
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
      this.checkInvert = false;
    },
    // 反选
    handleInvertCheckChange(val) {
      let cities = this.cities;
      let checkedCities = this.checkedCities;
      if (checkedCities.length === 0) {
        checkedCities = val ? cities : [];
      } else if (checkedCities.length === cities.length) {
        this.checkedCities = [];
        this.checkAll = false;
      } else {
        let list = cities.concat(checkedCities).filter((v, i, array) => {
          return array.indexOf(v) === array.lastIndexOf(v);
        });
        this.checkedCities = list;
      }
    },
    // 多选
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
      this.checkInvert = false;
    },
  },
};
</script>

<style>
</style>

接口获取省份

 <div>
    <el-checkbox
      v-model="checkAll"
      @change="handleCheckAllChange"
      :indeterminate="isIndeterminate"
      >全选</el-checkbox
    >
    <el-checkbox v-model="checkInvert" @change="handleInvertCheckChange"
      >反选</el-checkbox
    >
    <el-checkbox-group
      v-model="checkedCities"
      @change="handleCheckedCitiesChange"
    >
      <el-checkbox v-for="city in provinceList" :label="city" :key="city">{{
        city.label 
      }}</el-checkbox>
    </el-checkbox-group>
  </div>

        <div slot="footer" style="text-align:center;">
          <el-button @click="historyPriceFlag = false" type="primary">确定</el-button>
          <el-button @click="historyPriceFlag = false">取消</el-button>
        </div>

data

  provinceList: [],
  checkAll: false,
  checkInvert: false,
  checkedCities: ["上海", "北京"],
  isIndeterminate: true,

js

    // 全选
    handleCheckAllChange(val) {
      console.log(this.provinceList)
      this.checkedCities = val ? this.provinceList : [];
      this.isIndeterminate = false;
      this.checkInvert = false;
    },
    // 反选
    handleInvertCheckChange(val) {
      let cities = this.provinceList;
      console.log(cities)
      let checkedCities = this.checkedCities;
      if (checkedCities.length === 0) {
        checkedCities = val ? cities : [];
      } else if (checkedCities.length === cities.length) {
        this.checkedCities = [];
        this.checkAll = false;
      } else {
        let list = cities.concat(checkedCities).filter((v, i, array) => {
          return array.indexOf(v) === array.lastIndexOf(v);
        });
        this.checkedCities = list;
      }
    },
    // 多选
    handleCheckedCitiesChange(value) {
 
      console.log(value)
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.provinceList.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.provinceList.length;
      this.checkInvert = false;
       console.log(this.provinceList)
    },

 

 created() {     // 获取省市区列表     getAreaList().then(res => {       if (res.code == 200) {         this.provinceList = res.data       }     })   },

标签:el,checkbox,false,val,反选,length,cities,provinceList,checkedCities
From: https://www.cnblogs.com/shuihanxiao/p/17324806.html

相关文章

  • propeller实操
    首先建立a.c,为待优化的bin。//a.cintfun(intx){if(x>5)returnx+1;elsereturnx-1;}intmain(){intans=0;for(inti=0;i<100000000;i++)ans+=fun(i);returnans;}利用clang生成带bb块映射信息的object和exe注意这里clang要使用lld作为......
  • 聊聊Redis sentinel 机制
    Redis的哨兵机制自动完成了以下三大功能,从而实现了主从库的自动切换,可以降低Redis集群的运维开销:监控主库运行状态,并判断主库是否客观下线;在主库客观下线后,选取新主库;选出新主库后,通知从库和客户端。 一、为什么需要哨兵主从模式下,如果主库发生故障了,那就直接会影响到......
  • 12.shell 函数应用
    1.什么是函数函数其实就是一堆命令的集合,用来完成一些特定的代码块。作用:便于代码的复用,跟脚本类似2.函数的基本概述#定义函数#第一种函数名(){  命令集合}#第二种function函数名{  命令集合}#示例  2.函数状态返回  3.状态返回案例 ......
  • APP爬虫初阶之Pixel2刷机root
    pixel2刷机刷机准备lineageziptwrpimgmagiskzip(github上下的是APK,需要把后缀改为zip)刷机步骤首先需要一个底包,这里我用的出厂自带的google官方系统,没有重新刷入手机上打开usb调试,关闭屏幕超时锁屏,打开OEM锁手机完全关机,按住向下键重启(或者通过adbrebootbootl......
  • telnet(远程登录协议)
    1.telnet配置的三种方式none:表示下次使用该用户线登录时不需要进行用户名和密码认证,任何人都可以登录设备。password:表示下次使用该用户线登录时,需要输入密码。scheme:表示下次使用该用户线登录设备时需要进行用户名和密码认证。2.用户角色network-admin:具有最高权限,可操作系统所......
  • React onBlur回调中使用document.activeElement返回body解决方案
    最开始想实现一个功能,点击img图标后给出购物下拉框CartDropdown,当img及CartDropdown失去焦点时隐藏CartDropdown。最开始的核心代码如下:exportdefaultfunctionCart(){ const[isCartOpen,setIsCartOpen]=useState(false) functionclickHandler(){ setIsCartOpen(......
  • Minimum Number of Visited Cells in a Grid
    MinimumNumberofVisitedCellsinaGridYouaregivena0-indexed mxn integermatrix grid .Yourinitialpositionisatthetop-left cell (0,0).Startingfromthecell (i,j),youcanmovetooneofthefollowingcells:Cells (i,k) with j<k......
  • Semantic Kernel 入门系列 ❤️‍
    SemanticKernel是一种轻量级应用开发框架,用于快速开发融合LLMAI的现代应用。此系列文章,将会从传统软件开发者的角度,逐步认识SemanticKernel,并了解其核心概念和基本的使用方法。......
  • Semantic Kernel 入门系列:
    SemanticKernel的一个核心能力就是实现“目标导向”的AI应用。目标导向“目标导向”听起来是一个比较高大的词,但是却是实际生活中我们处理问题的基本方法和原则。顾名思义,这种方法的核心就是先确定目标,然后在寻找实现目标的方法和步骤。这对于人来说的是很自然的事情,但是对......
  • Django基础 - 06Model模型的关联关系及对象继承
     一、 一对一关系:实名认证表一对一关系: models.OneToOneField主表的数据是相对重要的(UserEntity), 从表需要主动声明关系(RealProfile)对象获取: 从表获取主表数据, 直接使用字段, 对象.字段名.属性名; 主表获取从表数据: 隐性的, 对象.模型名.属性名1.1 声明一对一......