vue using custom header, to achieve export columns

 <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')复制代码

Guess you like

Origin blog.csdn.net/weixin_34367845/article/details/91387576