vue中使用自定义表头并实现按列导出的功能

 <input style="cursor: pointer;vertical-align: middle;margin-left: 6px;" class="Alldownlode" @click="AlldownlodeFun()" type="checkbox"  v-model="check">
      <span style="color:#496fec">全选</span>
      <i class="el-icon-download" @click="downLoad()"></i>
 
 <el-table
          :data="tableData"
          :header-cell-style="tableHeaderColor"
          height="95%"
          :cell-style="cellStyle"
          style="width: 100%" :row-class-name="tableRowClassName">
          <el-table-column
            :render-header="renderHeader"
            label="时间" width="40">
            <el-table-column  prop="operDate" :formatter="formatDate" >
            </el-table-column>
          </el-table-column>
          <el-table-column
            :render-header="renderHeader"
            label="产品型号" width="30">
            <el-table-column prop="eqName" >
            </el-table-column>
          </el-table-column>
          <el-table-column
            width="45"
            :render-header="renderHeader"
            label="氧气浓度">
            <el-table-column  prop="o2nd" >
            </el-table-column>
          </el-table-column>
          <el-table-column
            width="45"
            :render-header="renderHeader"
            label="氮气流量" >
            <el-table-column prop="n2nd" >
            </el-table-column>
          </el-table-column>
          <el-table-column
            width="45"
            :render-header="renderHeader"
            label="焊剂浓度" >
            <el-table-column prop="hjnd" >
            </el-table-column>
          </el-table-column>
          <el-table-column
            width="45"
            :render-header="renderHeader"
            label="网带速度" >
            <el-table-column prop="wdsd" >
            </el-table-column>
          </el-table-column>
        </el-table>
        
        重要代码：:render-header="renderHeader"
        
data(){
    return{
        check:false//全选默认为不选中
    }
}   
methods:{
      renderHeader (h, { column, $index }) {
      // 这里可以根据$index的值来对自身需求进行修改，
      return [
        h('span', [
          h('input', {
            on:{
              change: ($event) => { this.handleChange($event,{ column, $index}) },
            },
            'class':'checkbox',
            attrs:{
              type:'checkbox',
              value:column.label,
              index:$index
            },
            // props:{
            //   'checked':true
            // }
          }),
          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)
      }else if($event.target.checked==false){
        console.log(column)
      }
    },
    <!--点击了下载时--><!--让所有选中的框不选中-->
    downLoad(){
    let AllArr=document.querySelectorAll('.checkbox')
     for(var c=0;c<AllArr.length;c++){
            console.log(AllArr[c].checked)
            AllArr[c].checked=false;
          }
    }
    
<!--点击了全选时让所有的选中-->
     AlldownlodeFun(){
      console.log(document.querySelectorAll('.checkbox'))
      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;
        }
      }
    },
}
复制代码