vue中el-checkbox全选、反选、多选的实现

 更新时间:2023年05月16日 16:29:39   作者:粽子师兄  
这篇文章主要介绍了vue中el-checkbox全选、反选、多选的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

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

描述:实现对一组数据进行全选,反选、多选操作

  • 全选
1
2
3
4
5
handleCheckAllChange(val) {
  this.checkedCities = val ? cityOptions : [];
  this.isIndeterminate = false;
  this.checkInvert = false;
}
  • 反选
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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;
  }
}
  • 多选
1
2
3
4
5
6
7
handleCheckedCitiesChange(value) {
  let checkedCount = value.length;
  this.checkAll = checkedCount === this.cities.length;
  this.isIndeterminate =
    checkedCount > 0 && checkedCount < this.cities.length;
  this.checkInvert = false;
}

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<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>

checkbox多选框,indeterminate 状态

举个例子。比如选择星期。一周七天

2种方法。思密达。。。。第一种带局限性。笨办法,也发出来大家看看(推荐使用第二种)

这是方式的值是组件自带的值方式

1
const cityOptions = ['周一', '周二', '周三', '周四','周五','周六','周天']
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<template>
  <div>
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <div style="margin: 15px 0;"></div>
    <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,
        checkedCities: [],
        cities: cityOptions,
        isIndeterminate: true,
        arr:[]
      }
    },
    methods: {
      handleCheckAllChange(val) {
        let tempArr = []
        this.checkedCities = val ? cityOptions : []
        this.isIndeterminate = false
        // console.log(this.checkedCities)
        // console.log(val)
        if (this.checkedCities != []) {
              if(val == true){
                tempArr = [1,2,3,4,5,6,0]
                this.arr = tempArr
              }else if(val==false){
                tempArr = []
                this.arr = tempArr
          }
        }
        console.log(this.arr)
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        var tempArr = []
        for(let i=0;i<value.length;i++){
          if(value[i] === '周一') {
            tempArr.push(1)
          }else if(value[i] === '周二'){
            tempArr.push(2)
          }else if(value[i] === '周三'){
            tempArr.push(3)
          }else if(value[i] === '周四'){
            tempArr.push(4)
          }else if(value[i] === '周五'){
            tempArr.push(5)
          }else if(value[i] === '周六'){
            tempArr.push(6)
          }else if(value[i] === '周天'){
            tempArr.push(0)
          }
        }
        this.arr = tempArr
        console.log(this.arr)
      }
    }
  }
</script>
<style scoped>
</style>

之后UP想了一下。不对。后台反过来的数组不应该是这种。大部分都应该是obj的形式

于是乎。

1
const cityOptions = [{a:'周一',b:1}, {a:'周二',b:2}, {a:'周三',b:3},{a:'周四',b:4},{a:'周五',b:5},{a:'周六',b:6},{a:'周天',b:7}];

对吧这种形式才对。说不定可能有很多很多。万一叫你把一个月都列出来也说不定。

继续上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<template>
    <div style="height: 1000px">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="city in cities" :label="city.b" :key="city.b">{{city.a}}</el-checkbox>
      </el-checkbox-group>
    </div>
</template>
<script>
  const cityOptions = [{a:'周一',b:1}, {a:'周二',b:2}, {a:'周三',b:3},{a:'周四',b:4},{a:'周五',b:5},{a:'周六',b:6},{a:'周天',b:7}];
  export default {
    name: "tourSpecialEdition",
    components: {},
    data(){
      return{
        checkAll: false,
        checkedCities: [],
        cities: cityOptions,
        isIndeterminate: false
      }
    },
    created() {},
    mounted() {},
    methods: {
      handleCheckAllChange(val) {
        const arr = val ? cityOptions : [];
        this.checkedCities = [];
        arr.map(item => {
          this.checkedCities.push(item.b);
          console.log(this.checkedCities.sort())
        });
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let arrTime = value
        this.checkedCities = arrTime
        console.log(this.checkedCities.sort())
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    }
  }
</script>
<style scoped>
</style>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/qq_45268602/article/details/123007404

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • vue如何加载本地json数据

    vue如何加载本地json数据

    这篇文章主要介绍了vue如何加载本地json数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 解决vue 按钮多次点击重复提交数据问题

    解决vue 按钮多次点击重复提交数据问题

    这篇文章主要介绍了vue 按钮多次点击重复提交数据的问题,本文通过实例结合的形式给大家介绍的非常详细,需要的朋友可以参考下
    2018-05-05
  • vue实现动态路由的方法及路由原理解析

    vue实现动态路由的方法及路由原理解析

    这篇文章主要介绍了路由原理及vue实现动态路由,Vue Router 提供了丰富的 API,可以轻松地实现路由功能,并支持路由参数、查询参数、命名路由、嵌套路由等功能,可以满足不同应用程序的需求,需要的朋友可以参考下
    2023-06-06
  • 前端vue数组去重的三种方法代码实例

    前端vue数组去重的三种方法代码实例

    数组去重是我面试时候经常会问到应聘者的一个问题,所以下面这篇文章主要给大家介绍了关于前端vue数组去重的三种方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-06-06
  • 深入理解Vue.js源码之事件机制

    深入理解Vue.js源码之事件机制

    本篇文章主要介绍了Vue.js源码之事件机制,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vuex vue简单使用知识点总结

    vuex vue简单使用知识点总结

    在本篇文章里小编给大家整理了关于vuex vue简单使用知识点总结,有需要的朋友们可以参考下。
    2019-08-08
  • vue3触发父组件两种写法

    vue3触发父组件两种写法

    这篇文章主要介绍了vue3触发父组件两种写法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • vue项目中less的一些使用小技巧

    vue项目中less的一些使用小技巧

    前段时间一直在学习vue,开始记录一下遇到的问题,下面这篇文章主要给大家介绍了关于vue项目中less的一些使用小技巧,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-09-09
  • 如何在vue项目中使用UEditor--plus

    如何在vue项目中使用UEditor--plus

    UEditor是由百度web前端研发部开发的所见即所得的开源富文本编辑器,这篇文章主要介绍了如何在vue项目中使用UEditor--plus ,需要的朋友可以参考下
    2022-08-08
  • 前端构建工具Webpack、Vite区别有哪些

    前端构建工具Webpack、Vite区别有哪些

    Webpack和Vite是两种主流的前端构建工具,它们在功能、性能和使用场景上有所不同,Webpack提供丰富的功能和配置,适合大型复杂项目,但可能导致启动和构建速度较慢,Vite基于ES模块,支持快速的热替换,适合小型或中等项目,需要的朋友可以参考下
    2024-10-10

最新评论