<el-table-column
:render-header="renderHeader"
label="产品型号" width="30">
</el-table-column>
<!--点击全选的时候-->
<input style="cursor: pointer;vertical-align: middle;margin-left: 6px;" class="Alldownlode" @click="AlldownlodeFun()" type="checkbox" v-model="check">
<span style="color:#496fec">全选</span>
注：在表头写上:render-header="renderHeader"
data(){
return{
check:false,//全选默认是没哟被选中的
tableSort：[]//存放选中的数据
}
}
methods:{
renderHeader (h, { column, $index }) {
// 这里可以根据$index的值来对自身需求进行修改，
return [
h('span', [
h('input', {
on:{
//变化的时候调用的方法
change: ($event) => { this.handleChange($event,{ column, $index}) },
},
//添加class名称
'class':'checkbox',
attrs:{
type:'checkbox',
value:column.label,
index:$index
},
}),
h('span', column.label)
]),
h('span', {
'class': ['virtual']
})
]
},
// 点击表头的选框时
handleChange($event, column){
console.log($event)
if($event.target.checked==true){
console.log(column.$index)
console.log(column.column.label)
this.columsList.push({
index:column.$index,
name:column.column.label
})
//后端需要传给他的数据是按表格的顺序来排列的
this.tableSort=this.paixu(this.columsList)
}else if($event.target.checked==false){
//当用户取消选中的时候，我们应该将他从原有的数组中移除
for(var i=0;i<this.tableSort.length;i++){
console.log(this.tableSort[i].index==column.$index)
if(this.tableSort[i].index==column.$index){
this.tableSort.splice(i,1)
}
}
}
},
//将用户选择的表头进行排序，这里的排序是按照下标来排序的
paixu(arr){
for(var i=0;i<arr.length-1;i++){
for(var j=0;j<arr.length-i-1;j++){
if(arr[j].index>arr[j+1].index){
var hand = arr[j];
arr[j]=arr[j+1];
arr[j+1]=hand;
}
}
}
return arr;
},
// 点击全选的时候
AlldownlodeFun(){
var _this = this
let AllArr=document.querySelectorAll('.checkbox')//获取所有选中的
for(var c=0;c<AllArr.length;c++){
if(!_this.check){
AllArr[c].checked=true;
this.tableSort.push({
name:[AllArr[c].value],
index:c
})
}else{
AllArr[c].checked=false;
}
}
},
// 下载统计表
downLoad(){
if(this.tableData.length !=0){
let AllArr=document.querySelectorAll('.checkbox')
if(this.tableSort.length != 0){
let tableArr=this.tableSort
let String=''
for(var i=0;i<tableArr.length;i++){
String+=tableArr[i].name+','
}
//去除最后一个逗号
String=String.substring(0,String.length-1)
console.log(String)
let eqId=sessionStorage.getItem('eqId')
location.href=`/api/downloadExcel?eqId=`+eqId+`&colums=`+String
this.$message({
type: 'warning',
message: '正在下载......'
});
//导出之后将表头的选框取消选中
for(var c=0;c<AllArr.length;c++){
console.log(AllArr[c].checked)
AllArr[c].checked=false;
}
this.check=false
}else{
this.$message({
type: 'warning',
message: '请选择要导出的内容'
});
}
}else{
this.$message({
type: 'warning',
message: '您要导出的表格为空'
});
for(var c=0;c<AllArr.length;c++){
console.log(AllArr[c].checked)
AllArr[c].checked=false;
}
//取消全选的选中
this.check=false
}
},
}
在下载的函数中需要写上：
let AllArr=document.querySelectorAll('.checkbox')复制代码
<el-table-column
:render-header="renderHeader"
la
阅读背景：
vue中使用自定义表头，实现按列导出
来源：互联网
分享到：
