vue+iview实现表格选中记忆+前端导出功能

1. 选中记忆

   <Table
         no-data-text="暂无任何数据"
         stripe
         :columns="column"
         :data="listData"
         ref="selection"
         @on-select="handleSelectRow"
         @on-select-cancel="handleCancelRow" 
         @on-select-all="handleSelectAll" 
         @on-selection-change="handleCancelAll"
       ></Table>
   

   //选中某一项
   handleSelectRow(selection,row){
     let flag = this.selectedData.some(item => item.id == row.id);
      if(!flag){
        this.selectedData.push(row);
      }
   },
   //取消选中某一项
   handleCancelRow(selection,row){
     this.selectedData.forEach((item,index) => {
        if(item.id == row.id){
          this.selectedData.splice(index,1);
        }
     })
   },
   //点击全选
   handleSelectAll(){
     let current = this.$refs.selection.getSelection();
     current.forEach(temp => {
       let flag = this.selectedData.some(item => item.id == temp.id);
       if(!flag){
         this.selectedData.push(temp);
       }
      })
   },
   //点击取消全选
   handleCancelAll(){
      let current = this.$refs.selection.getSelection();
      if(!current || current.length == 0){
         let current = this.listData;
         current.forEach(temp => {
           this.selectedData.forEach((item,index) => {
              if(item.id == temp.id){
                this.selectedData.splice(index,1);
              }
           })
         })
      }
   },
   //查询表格数据
   getData(){
         this.axios.post('/xxxx/xxxpath', params, function(data) {
           if (data.rtnCode === '0000') {
             this.listData = list;
             // 由于渲染时间的原因，使用setTimeout规避
             setTimeout(() => {
               this.setChecked();
             }, 0);
           }else{
             this.$Message.error(data.rtnMsg);
           }
         })
   },
   //设置选中记忆
   setChecked(){
         if(this.selectedData.length <=0){
           return;
         }
         let current = this.listData;
         current.forEach(temp => {
           this.selectedData.forEach((item,index) => {
             if(item.id == temp.id){
               this.$refs.selection.$refs.tbody.objData[index]._isChecked = true;
             }
           })
         })
     }
   

2. 导出

   exportData(){
     if(this.selectedData.length <= 0){
       this.$Message.error('请先选择需要导出的数据');
       return;
     }else{
       this.$refs.selection.exportCsv({
         filename: `${new Date()}导出数据`,
         //columns: this.column.filter((col, index) => index < 4),  //可设置导出列
         data: this.selectedData
       });
      }
   }