Ant Design 分页数据回显问题

我们可以创建一个新的值来保存这些数据allSingleSelectedRowKeys；

 

下面是我们的HTML结构

<a-table 
        :row-selection="{ 
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
          onSelect: onSelect,
          onSelectAll: onSelectAll,
          }" 
        :columns="columns" 
        :data-source="data" 
        :pagination="false"
      >
      </a-table>

数据初始化

const state = reactive({
      allSingleSelectedRowKeys: [],
      selectedRowKeys:[],//已选择的
      onceAgainRowKeys:[],//回显
      columns : [],
      data : [],
    })

//回显的，就那到返回给我们的数据处理下，
state.allSingleSelectedRowKeys = state.onceAgainRowKeys
//右边的是后端返我们的数据，已经选择了的人

后端返我们数据我们保存在这个里面state.allSingleSelectedRowKeys；

下面的代码是我的整个列表的数据，在获取数据的同时来判断state.allSingleSelectedRowKeys里面是否已经有我们已经选择的了，

有就把key加到我们列表显示的selectedRowKeys里面（这个就是我们列表是否勾选的地方）；

关键的是这句代码

if(state.allSingleSelectedRowKeys.indexOf(key) > -1){
            selectedRowKeys.push(key)
       }

 

// 获取列表数据
    const getUserAllList = (parmar) =>{
      userAllList(parmar).then(res=>{
        
        let selectedRowKeys = [];
        //列表的数据
        state.data = []
        res.list.map(i =>{
          let key = i.user_id+":"+i.staff_info.staff_id;
          
          if(state.allSingleSelectedRowKeys.indexOf(key) > -1){
            selectedRowKeys.push(key)
          }
          state.data.push({
            key: key,
            user_id:i.user_id,
            name:i.name,
          })
        })
        state.selectedRowKeys = selectedRowKeys;
      })
    }

首先我们可以看到onSelect需要传入一个函数作为回调，然后这个方法的参数里有record, selected, selectedRows这几项（nativeEvent原生事件暂时不用关心）
1、record就是当前操作（选中或取消选中）的item
2、selected是个布尔值，true代表本次是选中操作，false就是取消选中
3、selectedRows是一个数组，就是当前已选择的items（没有跨页的记录）

 

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

如果没有找到匹配的字符串则返回 -1。

//选择或者取消事件
const onSelect = (record, selected, selectedRows) => {
        let index = state.allSingleSelectedRowKeys.indexOf(record.key)
        if (index == -1) {
          state.allSingleSelectedRowKeys.push(record.key)
        }else{
          state.allSingleSelectedRowKeys.splice(index, 1)
        }
      
    }

 至于onSelectAll，是在点击全选和取消全选时触发的回调函数，截图中也可以看到，它有selected, selectedRows, changeRows这三个参数
1、selected，同上，true全选，false取消全选
2、selectedRows，也同上，当前已选择的items（没有跨页的记录）
3、changeRows，这个可就优秀了，它就是你的全选/取消全选操作引起变化的items数组

我们直接遍历这个数组把已经选中的item传进去单选的方法就可以了。

//全选和全不选事件
const onSelectAll = (selected, selectedRows, changeRows) => {
      changeRows.map(item => {
        onSelect(item, selected, selectedRows)
      })
    }

// 表格勾选事件
   const onSelectChange = (selectedRowKeys,selectedRows) => {
      state.selectedRowKeys = selectedRowKeys;
   };

我们在保存的时候这个state.allSingleSelectedRowKeys里面就是我们选没选中的数据了