vue使用checkbox复选框实现全选单选全不选功能

大致思路:使用数组中元素控制表身复选框是否勾选,以及是否全选

具体思路:

1.先定义一个tableDatas数组,存放被选中的行,v-for渲染的行会根据数组中是否有当前行,来判断当前行的复选框是否勾选

2.点击全选时:把所有行放入tableDatas数组

3.点击全不选时:把tableDatas数组清空

4.点击某行复选框时:先在数组中查找当前行是否存在,如果存在就删掉(取消勾选),如果不存在就添加到数组中(进行勾选),接着判断数组的长度与数据的长度是否相等,相等的话激活全选框,不等的话取消勾选全选框

扩展:进行前端分页后实现全选单选全不选

currentPage代表当前所在页,pagesize代表每一页的数据量
这部分是进行前端分页后,单击全选框和单击列表复选框的代码

selectAll($event){
      if($event.currentTarget.checked==true){
        //点击全选
        this.tableDatas=[];
        for(let i = (this.currentPage-1)*this.pagesize; i < this.currentPage*this.pagesize; i++){
          this.tableDatas.push(i);
        }
      }else if(($event.currentTarget.checked==false)){
        //全不选
        this.tableDatas=[];
      }
      this.thChecked = $event.currentTarget.checked;
    },
    select(index){
      if(index > (this.currentPage-1)*this.pagesize-1 && index < this.currentPage*this.pagesize){
        let a =this.tableDatas.indexOf(index);
        if(a >= 0){
          this.tableDatas.splice(a,1);
        }else{
          this.tableDatas.push(index);
        }
        if(this.currentPage == Math.ceil(this.tableData.length/this.pagesize)){
          //当页数为最后一页时
          if(this.tableDatas.length == this.tableData.length-(this.currentPage-1)*this.pagesize){
            this.thChecked = true;
          }else{
            this.thChecked = false;
          }
        }else{
          //当前页数非最后一页
          if(this.tableDatas.length < this.pagesize){
            this.thChecked = false;
          }else if(this.tableDatas.length >= this.pagesize){
            this.thChecked = true;
          }
        }
      }else{
        this.tableDatas=[];
      }
    },

这部分是没有前端分页的完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <table>
            <!-- 表头 -->
            <tr>
                <th>日期</th>
                <th>
                    <input type="checkbox" @click="selectAll($event)" v-model:checked="thChecked">
                </th>
                <th>地址</th>
            </tr>
            <!-- 表身 -->
            <tr :key="index" v-for="(item, index) in tableData">
                <td>{
  {item.date}}</td>
                <td>
                    <!-- 在tableDatas数组中查找index,indexOf查找到以后会返回index所在位置,如果tableDatas.indexOf(index)>=0就意味着这个复选框要被勾选 -->
                    <input type="checkbox" @click="select(index)" :checked="tableDatas.indexOf(index)>=0">
                </td>
                <td>{
  {item.address}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            tableDatas: [], //被选中的行
            thChecked: false, //全选按钮默认为没选中
        },
        methods: {
            selectAll($event) {
                if ($event.currentTarget.checked == true) {
                    //全选先把数组清空,然后遍历数据,把所有行的index加入到数组中(也就是从0到tableData长度减一)
                    this.tableDatas = [];
                    for (let i = 0; i < this.tableData.length; i++) {
                        this.tableDatas.push(i);
                    }
                } else if (($event.currentTarget.checked == false)) {
                    this.tableDatas = []; //全不选,则把数组清空
                }
            },
            select(index) {
                let a = this.tableDatas.indexOf(index); //a为当前点击行index在tableDatas中的位置
                if (a >= 0) {
                    //存在的话,就从数组中删掉这个
                    this.tableDatas.splice(a, 1);
                } else {
                    //不存在的话就加入到数组中
                    this.tableDatas.push(index);
                }
                //判断全选按钮是否勾选
                if (this.tableDatas.length != this.tableData.length) {
                    //数组的长度不等于数据的长度,则全选按钮不勾选
                    this.thChecked = false;
                } else {
                    //数组的长度等于数据的长度,全选按钮勾选
                    this.thChecked = true;
                }
            },
        }
    });
</script>
</html>
    原文作者:柳Sir
    原文地址: https://blog.csdn.net/weixin_46552424/article/details/108493312
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞