uniapp根据高度表格合并

已于 2023-08-28 18:11:26 修改
阅读量1.3k 收藏
点赞数
分类专栏： 前端实战开发 文章标签： uni-app
于 2023-08-07 10:44:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43547255/article/details/131934768
版权

没有发现比较友好的能够合并表格单元格插件就自己简单写了一个，暂时格式比较固定

一、效果如下

在这里插入图片描述

二、UI视图+逻辑代码
<template>
	<view class="content">
		<scroll-view class<
了解本专栏 订阅专栏 解锁全文 超级会员免费看
可可鸭~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
合并table的行
12-14
合并table的行，相同项的行会自动合并
table自动合并相同值得单元格的例子
10-26
一个简单的自动合并相同值单元格的例子，简单易懂
uniapp 处理表格数据，合并行数据处理
Vue1024的博客
09-04 4898
uniapp 处理表格数据，合并行数据处理
uniapp uni-table表格组件 合并单元格
qq_17627195的博客
04-18 7250
就可以，虽然文档上并没有写这些参数，但是我实际使用后以后，发现这些参数是可以直接用的（我猜测其他的一些参数都是可以用的，但是还没有验证）。这里就放了部分表头的代码。
uniapp uView Table组件 合并单元格
最新发布
Leo的专栏
04-08 903
"taskRemark": "任务3","taskRemark": "任务3","taskRemark": "任务3","taskRemark": "任务3","taskRemark": "任务3","taskRemark": "任务3","taskRemark": "任务3","taskRemark": "任务3","taskRemark": "任务3","taskRemark": "任务3","taskRemark": "任务3","taskRemark": "任务3",
uni-app uView Ui Table 合并单元格
aibujin的博客
05-12 1万+
uni-app uView Ui Table 合并单元格 本组件标签类似HTML的table表格，由table、tr、th、td四个组件组成 table 组件裹在最外层，可以配置一些基础参数 tr 组件用于显示"行"数据 th 组件用于显示表头内容，类似td，不同之处在于字体加粗了，也带有背景颜色，也可以直接用td替代th td组件不是最小单位，为了合并单元格时，内部可以嵌入 tr 和 td 组件 效果图 Template 文件 <view class="table_box"> &l
vue uni-app 使用table原生循环合并行，可冻结进行滚动。
m0_61077437的博客
12-28 2494
如图，像这种页面排版我使用的是循环去进行合并单元格，那么数据结构也是分成一级和二级。这是html页面实现的逻辑，仅供参考，根据自己的业务需求进行修改。下面是数据格式，根据自己的需求进行编写。
uniapp和vue课程表实现、会议预约实现[表格table相同内容行的合并]
weixin_42711805的博客
08-30 1489
会议预约、课程表、table表格合并相同数据
vue单元格多列合并的实现
weixin_42715800的博客
04-11 859
单元格合并
uniapp 表格的介绍和使用
11-17
uniapp 表格
vue通过数据过滤实现表格合并
01-19
基于vue通过数据过滤实现表格合并，供大家参考，具体内容如下 需求 基于vue渲染的数据表格 需要对相同的列进行合并 思路 自从使用了vue，就再也不想直接操作dom节点了，所以还是对数据操作。 要合并单元格需要用到...
表格行列合并JS
01-09
//函数说明：合并指定表格（表格id为_w_table_id）指定列（列数为_w_table_colnum）的相同文本的相邻单元格 //参数说明：_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data //参数说明：_w_table_colnum 为需要合并单元格的所在列。为数字，从最左边第一列为1开始算起。 //函数说明：合并指定表格（表格id为_w_table_id）指定行（行数为_w_table_rownum）的相同文本的相邻单元格 //参数说明：_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ，此参数应为 #data //参数说明：_w_table_rownum 为需要合并单元格的所在行。其参数形式请参考jQuery中nth-child的参数。 // 如果为数字，则从最左边第一行为1开始算起。 // "even" 表示偶数行 // "odd" 表示奇数行 // "3n+1" 表示的行数为1、4、7、10....... //参数说明：_w_table_maxcolnum 为指定行中单元格对应的最大列数，列数大于这个数值的单元格将不进行比较合并。 // 此参数可以为空，为空则指定行的所有单元格要进行比较合并。
uni_app 组件教学
01-08
uni_app 组件教学，给大家分享。谢谢..
table-rowspan表格自动合并单元格插件
11-07
对table表格进行操作，两行根据点击添加 删除按钮 进行单元格的删除 添加 合并单元格。
uni-app table表格
10-26
uni-app 表格示例 no-bad-table
uniapp 表格.rar
04-10
uniapp 表格
uniapp swiper 图片高度根据图片宽度自适应+通过选项卡跳到锚点位置+滑动到某个要素位置添加事件
04-15
uniapp swiper 图片高度根据图片宽度自适应； 通过选项卡跳到锚点位置，类似h5单页面通过a链接导航效果； 滑动到某个要素位置时触发事件，如tab选项卡值更改等
uniapp table 组件
热门推荐
wwf1225的博客
06-16 2万+
uniapp table 组件 https://segmentfault.com/a/1190000019975326?utm_source=tag-newest uniapp是2019年非常的火爆的一个Dcloud开发跨平台前端工具，支持ios android wap，小程序，除了android有点卡外，其他暂时没有发现什么瑕疵。 最近在捣鼓uniapp项目，恰好用到table组件，之前写了个demo，后面一直都想写一个像样的，可以分享给别人用的组件。 自己的水平一般，开发出来的组件可能代码.
uniapp表格合并单元格
05-23
UniApp 中可以使用 `uni-list` 组件实现表格的展示，但是目前 `uni-list` 组件并不支持合并单元格。你可以考虑使用自定义组件或者第三方插件来实现表格的合并单元格功能。 其中，自定义组件需要手动实现合并单元格的算法和样式，比较麻烦；而第三方插件则可以直接使用已经封装好的组件，如 `uni-simple-table` 组件，该组件可以实现表格的合并单元格功能。 使用 `uni-simple-table` 组件的步骤如下： 1. 安装 `uni-simple-table` 组件 ``` npm install @dcloudio/uni-ui --save ``` 2. 在页面中引入组件 ```html <template> <view> <uni-simple-table :columns="columns" :data="data"></uni-simple-table> </view> </template> <script> import uniSimpleTable from '@dcloudio/uni-ui/lib/uni-simple-table/uni-simple-table.vue' export default { components: { uniSimpleTable }, data() { return { columns: [ { title: '姓名', key: 'name' }, { title: '性别', key: 'gender' }, { title: '年龄', key: 'age' }, ], data: [ { name: '张三', gender: '男', age: 22 }, { name: '李四', gender: '女', age: 21 }, { name: '王五', gender: '男', age: 23 }, ] } } } </script> ``` 3. 在 `columns` 中设置需要合并的单元格的 `rowspan` 和 `colspan` 属性，示例代码如下： ```js columns: [ { title: '姓名', key: 'name', rowspan: 2 }, { title: '性别', key: 'gender', rowspan: 2 }, { title: '年龄', key: 'age', colspan: 2 }, { title: '工作', key: 'job', colspan: 2 }, ], ``` 在上述示例代码中，设置了姓名和性别单元格需要合并两行，年龄和工作单元格需要合并两列。 需要注意的是，`uni-simple-table` 组件中的 `columns` 和 `data` 属性的使用方法与 `uni-list` 组件略有不同，具体使用方法可以参考官方文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

可可鸭~

想吃糖~我会甜

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值