vue中使用自定义表头，实现按列导出

 
 
 
  
      全选
 注：在表头写上: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;iarr[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复制代码