TDesign----表格组件reserveSelectedRowOnPaginate

最近在用一个使用人数比较少的UI库，就是腾讯出的TDesign。像这种使用人数少的UI库，有个最大的烦点就是，有啥问题百度都百度不到。因为用的人少。

今天恰巧遇到一个很神奇、很坑的API----reserveSelectedRowOnPaginate。

话不多说，直接进入正题。

1.reserveSelectedRowOnPaginate作用

根据官网描述，表格在全选时，是否跨页全选。

2.reserveSelectedRowOnPaginate怎么使用？

如果您不想全选的时候选中所有页的内容，只想选中当前页，那么只需要把reserve-selected-row-on-paginate设置为false就可以了。如果您想全选的时候选中所有页的内容，那就没必要往下看了，直接不加这个属性就可以了。

 <t-table
          v-model:selected-row-keys="tableData.selected"
          row-key="_id"
          :data="newTableData"
          :columns="tableData.columns"
          :pagination="pagination"
          :reserve-selected-row-on-paginate="false"
          @page-change="onPageChange"
          @select-change="onSelectChange"
        >

          <template #operation="slotProps">

             <--这部分是操作的内容-->

          </template>

        </t-table>

let tableData = reactive({

  columns: [

    {

      colKey: "row-select",

      type: "multiple",

      width: 50,

    },

    {

      colKey: "name1",

      title: "name1",

      width: "30%",

      ellipsis: true,

      // 对齐方式

      align: "center",

    },

    {

      colKey: "name2",

      title: "name2",

      width: "30%",

      ellipsis: true,

      align: "center",

    },

    {

      colKey: "operation",

      title: "操作",

      width: "10%",

      cell: "operation",

      fixed: "right",

      align: "center",

    },

  ],

  data: [],//表格数据，从后端获得

  selected: [],//当前被选中表格内容的id

});

3.坑在哪儿？

你会发现加了:reserve-selected-row-on-paginate="false"之后，会出现全选按钮被禁用，那么经过我反反复复的测试，发现只要在pagination对象加上pageSize:10就可以了。当然，不一定10，也可以是其他的数字。因为我的页面需求是没有选择每页显示多少条数据的下拉框，所以最开始的时候就没有加pageSize这个属性。

然后需要检查表格的数据如果有_id，那么第2步的row-key="_id"，这个就要跟表格数据进行匹配，因为选中表格内容最后是那的它的_id，可以进行批量删除什么的。如果你的表格数据是index，那么row-key="index"，总之要与你的表格数据进行匹配。

然后，你可能会发现，哎？？还是不行，反正就是达不到想要的效果。那么，你可以重启一下项目，说不定好了。

const pagination = reactive({

  current: 1,

  showPageSize: false,

  pageSize:10,

  total: 0,

});

4.拓展----切换其他页，保存当前选中的数据

官方给的这个API只能满足，全选当前页的内容，切换页码之后，再回到之前全选的页码，就没有刚才选中的内容了。那么想要实现，随意切换页码，但是之前选中的内容一直被选中怎么办呢？请参考下面的代码：

const selectedData=reactive({});//用来保存所有被选中的表格内容。这里用的是对象的形式，{页码:[选中id]}

const is_changePage=ref(false);//用来监听是否页码被切换

const onSelectChange = (selectedRowKeys, context) => {

  if(is_changePage.value){

    tableData.selected=selectedData[pagination.current] || [];

    is_changePage.value=false;

  }else{

    selectedData[pagination.current]=selectedRowKeys;

  }

};

const onPageChange = (pageInfo, context) => {

  pagination.current = pageInfo.current;

  is_changePage.value=true;

};

关于TDesign，还有其他的坑或问题，之后我会继续写，如果有小伙伴也用这个组件库的话，不妨一起讨论问题。