vue中使用自定義表頭，實現按列導出

<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')複製代碼