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

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

​
{
    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实现全选、全不选和部分选择功能，它们具体到底是怎么用代码实现的。这里我先贴出图让大家看下是什么样的布局与效果：

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

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就是兑换码。

<input type="checkbox" @change="singleChecked" :value="item.gccid" v-model="checkedCode" />

​
<div class="contentBottom">
    <label class="chooseAll"><input type="checkbox" class="allCheckedInput" v-model='isAllChecked' v-on:click='chooseAll'/> 全部选择</label>
    <span class="batchExport" @click="batchExport">批量导出</span>
</div>

​

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();
          }
        )
      },

​

​

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

全选的数据：

部分选择的数据：

很明显，每取消一次勾选，那么对应的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；如下（下面展示的是远程文件不是本地文件）：

<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>

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.上述基础工作做完了之后，回过头再去从博客的最开始看并且按步操作即可。