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')复制代码
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue是目前一种流行且广泛应用于前端开发的JavaScript框架。在Vue,常常需要实现下载并导出CSV格式的文件并自定义表头的功能。该过程一般涉及到一些的技术与操作,下面我们来一一探讨。 1. 安装“papaparse”模块 “papaparse”是一种用于解析csv的JavaScript模块,可以很方便的安装和使用使用npm安装即可: ```bash npm install papaparse --save ``` 2. 编写自定义表头使用“papaparse”模块进行CSV文件处理前,需要先定义表头。下面是一个简单的例子: ```javascript const headers = [ {label: '名1', key: 'columnName1'}, {label: '名2', key: 'columnName2'}, {label: '名3', key: 'columnName3'}, ]; ``` 其,label属性表示表头展示的文本内容,key属性唯一标识了该在数据的字段名称。 3. 编写CSV文件并下载 当自定义表头准备好后,可以开始编写CSV文件。在Vue,我们可以通过使用template标签来隐藏该部分内容: ```html <template id="csv-template"> 字段1,字段2,字段3\n 数据1,数据2,数据3\n </template> ``` 然后,可以编写一个方法来代表点击按钮后下载该文件。在该方法,我们使用“papaparse”模块内置的“unparse”方法将数据转换为CSV格式: ```javascript import Papa from 'papaparse'; downloadCSV() { const csv = Papa.unparse({ data: '数据1,数据2,数据3\n', header: true, }); const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.setAttribute('href', url); link.setAttribute('download', 'filename.csv'); link.style.visibility = 'hidden'; document.body.appendChild(link); link.click(); document.body.removeChild(link); } ``` 其,data属性表示CSV文件的数据内容,设置header属性为true,可以省略了编写表头的步骤。另外,我们还需要将blob对象转化为URL并添加至一个隐藏的链接完成下载动作。 以上即是导出CSV并自定义表头的方法,可以根据实际开发需求进行更进一步的定制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值