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里面就是我们选没选中的数据了

巴特西

Ant Design 分页数据回显问题

最新文章

热门文章