zoukankan      html  css  js  c++  java
  • ant-vue Table组件selectedRows翻页后不保留上一页已选

    <template>
    
          <s-table
            :pageSize="queryParam.size"
            ref="table"
            size="default"
            rowKey="id"
            :columns="columns"
            :data="loadData"
            :rowSelection="{
              selectedRowKeys: selectedRowKeys,
              onChange: onSelectChange,
               onSelect:onSelect,
                onSelectAll:onSelectAll,
            }"
            :customRow="handleCheck"
            :scroll="{ y: 'calc(100vh - 450px)' }"
          ></s-table>
      
    
    </template>
    
    <script>
    import { STable } from '@/components'
    const columns = [
      {
        title: '发票ID',
        dataIndex: 'id',
        key: 'id',
         100
      },
      {
        title: '发票号码',
        dataIndex: 'invoiceNo',
        key: 'invoiceNo',
         100
      },
      {
        title: '客户名称',
        dataIndex: 'cusName',
        key: 'cusName',
         100
      },
      {
        title: '上传时间',
        dataIndex: 'createTime',
        key: 'createTime',
         100
      },
    
    ]
    export default {
      name: 'RelationInvoice',
    
    
      computed: {
       
    
      },
      watch: {},
      components: {
        SerachModal,
        STable,
        DhEmpty
      },
      data () {
        return {
          columns,
         
          selectedRowKeys: [],
          selectedRows:[],
        }
      },
      created () {
      
      },
      methods: {
    
    
    
        onSelect (record, selected, selectedRows) {
          if (selected) {
            this.selectedRows.push(record);
          }
    
          if (!selected) {
            let delIndex = this.selectedRows.findIndex(val => {
              return val.id === record.id
            })
            this.selectedRows.splice(delIndex, 1);
          }
        },
        onSelectAll (selected, selectedRows, changeRows) {
          if (selected) {
            this.selectedRows = this.selectedRows.concat(changeRows);
          }
    
          if (!selected) {
            let selectedRows = JSON.parse(JSON.stringify(this.selectedRows));
    
            let delIndex = [];
            selectedRows.forEach((item, index) => {
              changeRows.forEach((val, itemIndex) => {
                if (item.id === val.id) {
                  delIndex.push(index);
                }
              })
            })
    
            delIndex.forEach(item => {
              delete selectedRows[item];
            })
    
            selectedRows = selectedRows.filter(item => {
              return item != undefined;
            })
            this.selectedRows = selectedRows
          }
        },
     
    
    
        onSelectChange (selectedRowKeys, selectedRows) {
          this.selectedRowKeys = selectedRowKeys
    
        },
    
        handleCheck (record, index) {
          return {
            on: {
              click: e => {
                const checkIndex = this.selectedRowKeys.indexOf(record.id)
                if (checkIndex === -1) {
                  this.selectedRowKeys.push(record.id)
                  this.selectedRows.push(record)
                } else {
                  this.selectedRowKeys.splice(checkIndex, 1)
                  this.selectedRows.splice(checkIndex, 1)
                }
              }
            }
          }
        }
      }
    }
    </script>
    
    <style <style lang="less" scoped>
    </style>
    

      

  • 相关阅读:
    MOSS007 服务器的配置
    服务器日志查询代码
    MOSS2007页面UI定制(无代码上手)
    远程服务器监控程序浅谈
    CoreChart安装使用分享(附 安装文件CoreChart.wsp)
    Tree WebPart的介绍
    思科金牌、银牌代理商名录
    如何让你的移动硬盘或者U盘变得百毒不侵呢?
    CCNA网络工程师面试题
    ICMP报文的各种格式和种类
  • 原文地址:https://www.cnblogs.com/lvlvlv/p/13536406.html
Copyright © 2011-2022 走看看