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
        });
       }
    }
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值