vue实现全选、全不选和部分选择功能

Dear 丶 2021-06-11 15:12 485阅读 0赞

在开发项目的过程当中，特别是开发后台管理系统时，会有很多的数据等待管理员去统一管理，所以有时候还需要将一些数据导出，然后打印，这是很有必要的，因为数据可以帮助分析这个产品是否具有价值。

我这里演示后台返回的数据格式如下：

{
        data:{
            list:[
                {id:240201,code:'nqctedp80pc8',desc:'推广',type:'41'},
                {id:240202,code:'nqh5q6j5vyss',desc:'推广',type:'41'},
                {id:240203,code:'nqkv99eqke8w',desc:'推广',type:'41'},
                ...
            ],
            pageInfo:{
                totalItem:44,
                totalPage:3,
                perPage:15,
                curPage:1
            }
        }
    }

对数据进行处理如下：

// get请求获取用户数据函数
          getRequestFunc: function(formData, requestUrl){
            var that = this;
            $.get(
              requestUrl,//请求数据路径，即接口
              formData,//请求数据参数，除了必需的参数，还有page这个非必须的参数，它的作用是获取当前页的数据列表。例如：page=10时，获取的是第十页的数据
              res => {
              that.personList = res.data.list;//用户数据列表
              that.pageInfo = res.data.pageInfo;//这个数据里面包括：当前页、总页数、当前页数目等
              that.curPage = res.data.paging.curPage;//当前页
              that.totalPage = res.data.paging.totalPage;//总页数
            });
          },

因此，在数据导出（我这里只想导出code兑换码）的时候，要选中某部分，或者全部选中的功能是提供给管理员的一个很有必要的功能，因为管理员只会选中有用的数据进行导出。所以，这里就在谈谈用vue实现全选、全不选和部分选择功能，它们具体到底是怎么用代码实现的。这里我先贴出图让大家看下是什么样的布局与效果：

![70][]

![70 1][]

![70 2][]

这里我先贴出一个链接，大家可以去看看了解一下：

[https://cn.vuejs.org/v2/guide/components-custom-events.html\#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model][https_cn.vuejs.org_v2_guide_components-custom-events.html_E8_87_AA_E5_AE_9A_E4_B9_89_E7_BB_84_E4_BB_B6_E7_9A_84-v-model]

好，下面进入主题：

HTML代码：

下面这个部分是在id的前面都要加上一个input用于勾选该栏目，value里的gccid就是兑换码。

CSS代码：

.contentBottom{
        width: 98%;
        height: 30px;
        line-height: 30px;
        text-align: right;
        margin-top: 50px;
        padding: 0 1%;
        font-size: 14px;
      }
    
      .batchExport,.chooseAll{
        float: left;
        display: inline-block;
        padding: 0 10px;
        border: 1px solid #CCC;
        border-radius: 5px;
        cursor: pointer;
      }
    
      .batchExport,.chooseAll{
        margin-left: 20px;
      }
    
      .allCheckedInput{
        vertical-align: middle;
      }

JS代码：

data() {
            return {
              personList: [],         // 用户信息列表
              pageInfo: {},           // 用户的其他信息，例如总数量，当前页，总页数及每页的数量
              checkedCode: [],        // 用于保存被选中的数据
              isAllChecked: false,    // 正在进行中的数据是否被选中
             }
          },
    
          // 用户单选
          singleChecked: function(){
            //判断每一个CheckBox是否选中，全选中让全选按钮选中
            if(this.personList.length == this.checkedCode.length){ 
                this.isAllChecked = true;
            }else{  // 只要有一个checkbox不选中，让全选按钮不选中
                this.isAllChecked = false;
            }
          },
    
          // 用户全选
          chooseAll: function(e){
            var that = this;
            if(that.checkedCode.length !== 0){          
              that.checkedCode = [];
            }
            if(that.isAllChecked){
              that.personList.forEach(function(singlePersonList){
                that.checkedCode.push(singlePersonList.code)
              },that)
            }else{
              that.checkedCode = [];
            }
          },
          
          // 一键导出
          batchExport: function(){
            var that = this;
            var len = that.checkedCode.length;
            if(len !== 0){
              var code_list = "";
              // code_list参数要以"'dasfdghdfg','dfe4vxv','rtersdc'"形式传入，每个后台需求不一样
              for(var i=0;i<len;i++){
                code_list += "'" + that.checkedCode[i] + "',";
              }
              code_list = code_list.substring(0,code_list.lastIndexOf(','));
              that.code_list = code_list;
              that.batchExportFunc();
            }else{
              console.log('您还未选中任一选项！');
            }
          },
    
          // 一键导出处理函数
          batchExportFunc: function(){
            var that = this;
            var requestUrl = index.baseApiUrl + "?m=movlib&c=giftcard&a=eportCodeList";
            var formData = {
              code_list: that.code_list
            };
            $.post(
              requestUrl,
              formData,
              res => {
                // 将生成的csv文件保存在本地
                var link = document.createElement("a");
                var blob = new Blob(["\ufeff" + res], {
                  type: 'text/csv'
                });
                link.setAttribute("href", URL.createObjectURL(blob));
                document.body.appendChild(link);
                link.click();
              }
            )
          },

下面我在浏览器控制台看一下打印的数据：

全选的数据：

![70 3][]

部分选择的数据：

![70 4][]

很明显，每取消一次勾选，那么对应的code值就会从数组中去除。

一个完整的全选、全不选和部分选择的功能就实现了，赶快去试一下吧~

\-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

应需要，我更新下完整的代码：

1.首先你用的要是vue.js库开发的项目，因为iview就是一套基于 Vue.js 的高质量UI 组件库；

2.我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 **<script>** 标签引入或者自己利用vue-cli初始化一个项目（个人建议利用vue-cli初始化，因为这样可以增强自己对构建vue项目的理解）；

3.1如果你是直接引入的 vue.min.js，那么这时你还需要再引入iview.min.js；如下（下面展示的是远程文件不是本地文件）：

3.2而如果你是用vue-cli搭建的项目，那么你直接在入口文件main.js的头部引入iview即可；因为用vue-cli搭建项目时，vue会在佛那个生成一个模块文件：node\_modules，这个文件内全部都是一些依赖，这些依赖可以根据项目需要，可以选择性的引入到main.js即可。至于iview.js在node\_modules/iview/dist/目录下，在main.js（**因为main.js文件是整个vue项目的入口文件，可理解为母文件，其内的变量和函数都是全局有效的**）头部引入即可使用，如下：

import iView from 'iview';
    
    import 'iview/dist/styles/iview.css';
    
    Vue.use(iView);

若是没有，那么需要自行安装：npm install iview --save

安装之后便可在node\_modules中找到iview的文件夹

4.上述基础工作做完了之后，回过头再去从博客的最开始看并且按步操作即可。

[70]: /images/20210522/b04210883b604260913b4809aab27a7e.png
[70 1]: /images/20210522/ff037329669f4f5d9eca63c1a3dcc609.png
[70 2]: /images/20210522/be965dd974d446df820f15984f079b74.png
[https_cn.vuejs.org_v2_guide_components-custom-events.html_E8_87_AA_E5_AE_9A_E4_B9_89_E7_BB_84_E4_BB_B6_E7_9A_84-v-model]: https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model
[70 3]: /images/20210522/4b7bc4c6e7704a74b04b8fd7935c853b.png
[70 4]: /images/20210522/b6fda8a9af8d45a58acddefffd04141c.png