ant design of vue 表格 默认,跨页勾选,翻页选择记忆勾选，数据回显勾选

需求

在使用ant design of vue 的table表格时需要让之前已选择的数据显示勾选状态，还要支持跨页勾选

思路

需要指定row-key绑定的值必须唯一
ant-design-vue的表格对于跨页勾选支持的非常友好，只要设置绑定一下rowKey就可以了，我这里绑定的是workerId

代码

<!-- 表格 -->
        <a-table
          class="FormData"
          :columns="columns"
          :data-source="data"
          :pagination="ipageination"
          :rowSelection="rowSelection"
          rowKey="workerId"
          bordered :scroll="{ y: 350 }"
          @change="handleTablePages"
          @showSizeChange="handleTableSizeChange"
        >
          <template slot="operation" slot-scope="text, record">
            <a-space>
              <!-- <a-button @click="edit(record)">编辑</a-button> -->
              <a-button @click="edit(record)">编辑</a-button>
              <a-button @click="delPersonnel(record)">删除</a-button>
         
            </a-space>
          </template>
        </a-table>

onSelect是点击勾选事件，selectedRowKeys是勾选的rowKey值的数组

在点击勾选事件里，判断是否勾选（selected）然后去操作rowSelection.selectedRowKeys，

这个数组是用来指定选中项的 key 数组

getCheckboxProps 是选择框的默认属性配置，这个函数可获得已选择的workerId的数组，让其数据勾选回显

data() {
	return{
        workerIdList: [],
		rowSelection: {
        	type: "checkbox",
	        // 不使用箭头函数就无法获取this
	        //单选
	        onSelect: (record, selected, selectedRows, nativeEvent) => {
	          // console.log(record, selected, selectedRows, nativeEvent)
	          const list = this.workerIdList
	          const selectedRowKeys = this.rowSelection.selectedRowKeys
	          console.log(list,selectedRowKeys);
	          if(!selected){
	          // 这里是取消勾选，删除对应的数组项
	            selectedRowKeys.map((x,item) => {
	              if(x === record.workerId){
	                selectedRowKeys.splice(item,1)
	              }
	            })
	            list.map((x,item) => {
	              if(x === record.workerId){
	                list.splice(item,1)
	              }
	            })
	            console.log(this.rowSelection.selectedRowKeys)
	          }
	          if(selected) {
	          	// 这里是点击勾选，添加workerId字段到selectedRowKeys数组里
	            this.rowSelection.selectedRowKeys.push(record.workerId)
	            console.log(this.rowSelection.selectedRowKeys)
	          }
	        },
	        //全选
	        onSelectAll: (selected, selectedRows, changeRows) => {
	          console.log(selected, selectedRows, changeRows)
	          if(selected) {
	            changeRows.map((x)=>{
	              this.rowSelection.selectedRowKeys.push(x.workerId)
	            })
	          }
	          if(!selected) {
	            const list = this.workerIdList
	            changeRows.map((item,k)=>{
	              list.map((x,i)=>{
	                if(x.workerId == item.workerId) {
	                  list.splice(i,1)
	                }
	              })
	            })
	            this.workerIdList = list
	            this.rowSelection.selectedRowKeys = []
	          }
	        },
        	selectedRowKeys: [],
	        getCheckboxProps:(record) => {
	          if(record.picked !== 0){
	            this.electedRowKeys.push(record.workerId)
	            this.workerIdList.push(record.workerId)
	            this.rowSelection.selectedRowKeys = this.workerIdList
	          }
	          return{
	            props:{
	              defaultChecked:record.picked !== 0,
	            },
	          }
	        },
      },
	}
}