Bootstrap

a-table 跨页勾选记录

a-table 增加rowKey=“id”

<a-table
      style="background: #ffffff"
      rowKey="id"
      size="middle"
      :pagination="ipagination"
      :columns="columns"
      :dataSource="myDataSource"
      @change="handleTableChange"
      :rowSelection="rowSelection"
      bordered
      :scroll="{
        x: false,
        y: record.options.scrollY
      }"
    >
      <template slot="htmlSlot" slot-scope="text">
        <span v-html="text"></span>
      </template>
      <template slot="htmlDate" slot-scope="text">
        <span  >{{simpleDateFormat(text,'yyyyMMdd')}}</span>
      </template>
      <template slot="imgSlot" slot-scope="text">
        <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
        <img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
      </template>
      <template slot="fileSlot" slot-scope="text">
        <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
        <a-button
          v-else
          :ghost="true"
          type="primary"
          icon="download"
          size="small"
          @click="downloadFile(text)">
          下载
        </a-button>
      </template>
      <span slot="action" slot-scope="text, record">
      <span v-if="hasEdit"> <a @click="handleEdit(record)">编辑</a></span>
      <a-divider v-if="hasEdit&&hasVolume" type="vertical" />
      <span v-if="hasVolume">
         <a @click="handleVolumn(record)">卷内</a>
      </span>
      <a-divider v-if="(hasEdit||hasVolume)&&(hasDelete||hasDetail)" type="vertical" />
       <span v-if="hasDelete||hasDetail">
       <a-dropdown>
                  <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
                  <a-menu slot="overlay">
                    <a-menu-item v-if="hasDetail">
                      <a @click="handleDetail(record)">详情</a>
                    </a-menu-item>
                    <a-menu-item v-if="hasDelete">
                      <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record)">
                        <a>删除</a>
                      </a-popconfirm>
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
         </span>
        </span>
    </a-table>
    ```
    ```
    data() {
            return {
                curSelectionRows:[] ,//当前页的选中记录集合
                selectionRows: [], /* table选中records,包含分页选中的records*/
                 /* table选中keys*/
                selectedRowKeys: [],
                ...
                }
                }

method

onSelectChange(selectedRowKeys, selectionRows) {
                this.selectedRowKeys = selectedRowKeys;
                this.curSelectionRows = selectionRows
                let tmpSelectionRows = []
                //当前页选中记录加上分页历史选中的记录
                tmpSelectionRows = [...this.selectionRows,...this.curSelectionRows]              
                if(selectedRowKeys.length === 1){
                    let record = selectionRows[0]
                    record['tableName'] = this.tableName
                    // let nrecord = {}
                    //Object.keys(record).forEach(k => (nrecord[k.replace(this.tableName+'.','')] = record[k]))
                    this.$emit("handlemModify",  record,'selectOneRecord');
                }else{
                    this.$emit("handlemModify", tmpSelectionRows,'selectRecordIds');
                }
            },

            handleTableChange(pagination, filters, sorter) {
                //TODO 筛选
                //console.log(pagination)
                if (Object.keys(sorter).length > 0) {
                    this.isorter.column = sorter.field;
                    this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
                }
                this.$set(this.ipagination,'current',pagination.current)
                this.$set(this.ipagination,'pageSize',pagination.pageSize)
                let nrecord = Object.assign(pagination,{tableName:this.tableName})
                //翻页时,清除包含当前数据源的记录
                 let ds = this.myDataSource||[]

                ds.forEach(it=>{
                    const idx = this.selectedRowKeys.findIndex(vl=>vl  == it.id)
                    //keys中没有选中,则从历史记录selectionRows中删除中
                    if(idx == -1){
                        const idx1 = this.selectionRows.findIndex(vl=>vl.id == it.id)
                        if(idx1>-1){
                            this.selectionRows.splice(idx1,1)
                        }

                    }
                })
                //加上当前选中记录
                if(this.curSelectionRows.length>0){
                    this.selectionRows = [...this.selectionRows,...this.curSelectionRows]
                }
                //alert(JSON.stringify(this.selectionRows))
               // alert( this.selectionRows.length+'  '+this.curSelectionRows.length)
                this.curSelectionRows = []
                this.$emit("handlemModify", nrecord,'handleTableChange');

            }

        }
;