最近在用一个使用人数比较少的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,还有其他的坑或问题,之后我会继续写,如果有小伙伴也用这个组件库的话,不妨一起讨论问题。