在开发项目的过程当中，特别是开发后台管理系统时，会有很多的数据等待管理员去统一管理，所以有时候还需要将一些数据导出，然后打印，这是很有必要的，因为数据可以帮助分析这个产品是否具有价值。
我这里演示后台返回的数据格式如下：
{
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实现全选、全不选和部分选择功能，它们具体到底是怎么用代码实现的。这里我先贴出图让大家看下是什么样的布局与效果：
这里我先贴出一个链接，大家可以去看看了解一下：
好，下面进入主题：
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值就会从数组中去除。
一个完整的全选、全不选和部分选择的功能就实现了，赶快去试一下吧~