【uni-app：表格】分页、点击行

最新推荐文章于 2024-08-29 15:22:54 发布

哇哦Q

最新推荐文章于 2024-08-29 15:22:54 发布

阅读量1.1k

点赞数

分类专栏： uni-app 文章标签： uni-app java 前端

本文链接：https://blog.csdn.net/Qxn530/article/details/126831949

版权

uni-app 专栏收录该内容

23 篇文章 8 订阅

订阅专栏

1、切换分页

2、表格——点击行

1、切换分页

<view class="uni-pagination-box">
	<uni-pagination show-icon :page-size="page.pagesize" :current="page.page" :total="total" @change="change" />
</view>

2、表格——点击行

第一步：修改源码

uni-modules/uni-table/components/uni-tr/uni-tr.vue

第二步：在使用的页面添加点击事件

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

哇哦Q

关注关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

uni-pagination实现表格分页查询

zys_QAQ的博客

05-19

328

使用uni-app中的插件实现分页查询

uni-app table表格

10-26

uni-app 表格示例 no-bad-table

参与评论您还未登录，请先登录后发表或查看评论

uniapp分页功能：实现自定义table表格选中及封装分页pagination组件

hcy5201314521的博客

12-09

1489

我在这个的基础上，修改了一些样式，写了自己的一个效果图。分页组件pagination.vue。分页组件pagination.vue。灵感来源于这一篇博主的文章。

uniapp uni-table 表格封装单选多选插槽可复用等

草木疏博客

08-29

467

uniapp 微信小程序和H5 uni-table 表格封装单选多选可复用等

uni-app自制表格及其分页

田螺姑娘的博客

10-06

1万+

uni-app自制表格及其分页展示效果： 1.引入插件 t-table表格【点击跳转】 uni-pagination分页器【点击跳转】 2.实例源码 <view style="font-size: 12rpx;margin-top: 25rpx; width: 800rpx; height:auto"> <t-table> <t-tr fontSize="16"> <t-th>序号</t-th> <t-th

移动端表格分页uni-app

weixin_59527403的博客

11-18

804

移动端表格分页uni-app

第02讲：uni-pagination实现表格分页查询

萧篱衣的博客

06-29

1831

在uniapp中通过uni-pagination组件实现表格内容的分页查询，实现思路和简单，分为两个步骤：1、使用MySQL的Limit语句按照要求查询出符合分页要求的记录；2、通过MySQL的COUNT函数获取该表中的全部记录...

（源代码）第03讲：uni-pagination实现表格分页查询

04-26

在本教程中，我们将深入探讨如何使用uni-app框架中的uni-pagination组件来实现表格数据的分页查询。uni-app是一款跨平台的开发工具，允许开发者使用Vue.js语法编写一次代码，部署到多端，如iOS、Android、H5、微信小...

UNI-APP 中sqlite demo 增删查改

06-24

`UNI-APP` 是一个基于 Vue.js 的多端开发框架，它允许开发者编写一次代码，就能运行在微信小程序、H5、Android、iOS 等多个平台。在 `UNI-APP` 中集成 SQLite 数据库可以帮助我们实现离线数据存储，这对于需要离线...

uni-app：实现分页功能，单击行获取此行指定数据，更改行样式

weixin_46001736的博客

08-01

936

uni-app：实现分页功能，单击行获取此行指定数据，更改行样式

uni-table行点击事件

m0_55333789的博客

07-31

729

uni-table行点击事件

uniapp 表格的介绍和使用

11-17

uniapp 表格

uniapp 展示表格并且前端实现分页

weixin_46760480的博客

12-26

2699

实现效果：

uniapp表格

weixin_61662162的博客

07-24

1092

在Vue.js中，使用表格来展示数据是一项常见的任务。本文将为大家解析和注释一个Vue.js可滚动表格组件的代码，帮助读者更好地理解和使用该组件。

uni-table 行点击分页选择、分页修改

qq_44681872的博客

04-01

2873

uni-table数据分页处理以及分页后数据选择的选择框样式渲染、已选数据的返回。 uni-table的check、toggleRowSelection方法修改，row-click方法的添加

uni-app 实现分页功能

热门推荐

weixin_45830334的博客

03-30

1万+

从Dclould下载的插件链接:简单实用的分页器 - DCloud 插件市场  <page-pagination v-show="show" :total="page.total" :showAround="true" :btnText="true" :forceEllipses="true" @change="change"> </page-pagination> data() { return { page: { tot.

【uniapp】 uni-table组件添加行点击事件

qq_45306078的博客

07-02

732

问题：在使用uniapp写微信小程序时，需要给uni-table添加行事件点击跳转，但是不成功，怎么解决？

uniapp 之 uni-table组件添加行点击事件

web13639198675的博客

02-23

4484

uniapp 之 uni-table组件添加行点击事件第一种方案（不改变导入的 tr 组件）第二种方案（改变 tr 组件）写在末尾由于 uniapp官网的uni-table组件并没有给出添加行点击事件的events，于是自己想方法基于uni-table组件实现了表格行点击事件；第一种方案（不改变导入的 tr 组件） <uni-table border stripe emptyText="暂无更多数据" :loading="loading"> <!-- 表头行

第04讲：uni-pagination实现表格分页查询

分享日常工作技术

04-26

2197

在uniapp中通过uni-pagination组件实现表格内容的分页查询，实现思路和简单，分为两个步骤： 1、使用MySQL的Limit语句按照要求查询出符合分页要求的记录； 2、通过MySQL的COUNT函数获取该表中的全部记录；接下来我们结合前两个章节的内容实现表格的分页查询。一、分页查询微服务在idea中使用通用Mapper（第02讲：通用Mapper）实现单表的分页查询，用户访问controller时需要传递2个参数，分别是初始页start和每页显示的条数pageS...

uni-table分页保存单选

最新发布

10-16

uni-table中的分页功能通常用于展示大量数据，当需要对每一项进行单选操作并且还要支持分页保存用户的选择时，你可以按照以下步骤操作： 1. **初始化uni-table组件**：首先，在表格组件`uni-table`上配置好列宽、行数据以及分页插件，如`data-source`、`row-key`等。 ```vue <template> <uni-table :data-source="tableData" :row-key="item => item.id" :column-head-template="columnHeadTemplate" :cell-template="cellTemplate" @on-load-more="loadMore">  </uni-table> </template> <script> export default { data() { return { tableData: [], // 初始化数据源 currentPage: 1, // 当前页数 }; }, methods: { loadMore() { this.loadPage(this.currentPage + 1); }, loadPage(page) { // 加载指定页的数据，并处理选择状态 } }, // ...其他方法 }; </script> ``` 2. **cell-template和column-header-template**：在单元格模板`cell-template`中添加单选框和保存按钮。在头部模板`column-head-template`中可以添加复选框或计数显示已选的数量。 ```html  <template slot-scope="{ item }"> <view class="select-item"> <input type="radio" value="{{ item.id }}" v-model="selectedIds" @change="onChangeItem(item.id)"> <span>{{ item.title }}</span> <button @click="saveSelection">保存选择</button> </view> </template>  <template slot="head"> <div> <input type="checkbox" v-model="selectAll" @change="toggleAllSelections"> <span>选择所有</span> <span>已选择: {{ selectedCount }}</span> </div> </template> ``` 3. **保存单选状态**：在`loadPage`方法中，检查当前页的`selectedIds`数组，并将单选的状态同步到服务器或本地存储，比如使用Vuex进行状态管理。 ```js methods: { onChangeItem(id) { // 更新选中项列表 this.selectedIds.push(id); }, saveSelection() { const selectedItems = this.tableData.filter(item => this.selectedIds.includes(item.id)); // 发送请求保存选择 this.saveSelectedItems(selectedItems); }, saveSelectedItems(items) { // 根据业务逻辑发送请求 }, toggleAllSelections() { this.selectAll ? this.selectAll = false : this.selectAll = true; if (this.selectAll) { this.selectedIds = []; // 清空已选列表 this.tableData.forEach(item => this.onChangeItem(item.id)); // 全部选中 } else { this.selectedIds = []; // 如果取消全选，则清空已选列表 } }, }, ```