uniapp实现表格的多选功能
创始人
2024-11-20 20:07:19

记录一下最近在做一个的表格数据多选功能。需求大致为支持多选、支持跨分页的连续选择、支持通过查询框后手动选择数据（我是后端选手，前端不太熟悉单纯记录~）。

主要思路为：

  • 将table中的唯一id，存入数组tableIds中进行记录。
  • 在选中事件中,若当前为新增则存id,若为移除则remove该id。
  • 在分页事件触发时（同时会触发表格的选中事件，在这里我检查如果当前为分页事件标志则不进行表格的选中事件），首先清除表格的所有选中项 table.value.clearSelection() ，然后查询当前页的数据是否存在已经选中的数据，若存在则选中 table.value.toggleRowSelection(index) 。
  • 在search事件触发时（同时会触发表格的选中事件，在这里我不进行表格的选中事件逻辑），和上面一样重新构造选中数据。

templete

ts相关代码

上一篇：如何在C\#中创建HTML表格

下一篇：图书借阅表格：连接过去与未来的神秘桥梁

相关内容

热门资讯

第五届琶洲算法大赛开启全球报名... 中新社广州5月6日电 (记者 许青青)由广州市政府主办的第五届琶洲算法大赛6日正式启动报名并上线了首...
软件性能测试包含哪些测试内容？ 性能测试报告 性能测试是对软件产品在特定条件下的性能进行测试和评估的过程。性能测试的内容可以包括以下...
胜硅来新材料取得金属硅粉用除铁... 国家知识产权局信息显示，河南胜硅来新材料科技有限公司取得一项名为“一种金属硅粉用除铁生产系统”的专利...
工业和信息化部批复开展卫星物联... 工业和信息化部日前正式批复开展卫星物联网业务商用试验，试验期为两年。 据了解，本次获批开展卫星物联网...
月球新矿物“铈嫦娥石”是怎么被... 本文转自【央视新闻客户端】； 近日，我国宣布发现三种月球新矿物：铈嫦娥石、镁嫦娥石、铈镁嫦娥石。其中...