iView(View UI) Table行合并

本文介绍了如何在iView Table中实现行合并,通过分析官方文档,总结了rowspan和colspan的使用规则,并提供了示例代码,特别是如何忽略特定列的行合并。代码仅供学习参考,欢迎交流更优解。
摘要由CSDN通过智能技术生成

官方文档 行/列合并

行/列合并

4.0.0 设置属性 span-method 可以指定合并行或列的算法。

该方法参数为 4 个对象:

  • row: 当前行
  • column: 当前列
  • rowIndex: 当前行索引
  • columnIndex: 当前列索引

该函数可以返回一个包含两个元素的数组,第一个元素代表 rowspan,第二个元素代表 colspan。 也可以返回一个键名为 rowspancolspan对象

但官方文档并没有说明rowspan和colspan是怎么回事,通过对官方的示例观察以及验证,得出以下结论:

rowspan=0 隐藏该行

rowspan=1 显示该行

rowspan>1 涉及合并的行数或者说合并rowspan-1的行数,需要注意的一点,它是从该行往下合并

                   比如rowspan为3,则从这一行开始算,接下来三行会进行合并。

colspan没验证过,但规则应该是一致的,把行换成列,往下合并换成往右合并。

下面实现“通用”的iView Table行合并:

1. 基于 官方文档 行/列合并 的示例代码修改

2. 只适用于数据格式为“常见”的对象数组

[
  {
    "name": "Jim",
    "age": 18,
    "address": "Sydney",
    "date": "2016-10-03"
  },
  {
    "name": "Jim",
    "age": 24,
    "address": "London",
    "date": "2016-10-01"
  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于使用 iView UI 的列表表格table)设计成树形列表,你可以按照以下步骤进操作: 1. 数据准备:准备一个包含父子关系的数据源,每个节点需要包含一个唯一的标识符(id),一个父节点标识符(parentId),以及其他你需要显示的字段。 2. 组件配置:在使用 iView UI表格组件(Table)时,你需要配置相关的属性和事件。 - 配置列(columns):根据你的需求配置表格的列,包括树形列和其他列。需要注意,在树形列中,你可以使用插槽(slot)自定义节点的展示方式。 - 配置数据(data):将数据源绑定到表格数据属性上。 - 配置展开(expandedRowKeys):为了实现树形结构的展开与折叠功能,你需要设置一个数组来存储已展开的的标识符。 - 配置点击事件(row-click):当点击时触发的事件,你可以在事件处理函数中切换的展开状态。 3. 数据处理:根据父子关系构建树形结构的数据,可以使用递归或循环来处理数据。 - 遍历数据源,将每个节点与其父节点关联起来。 - 将具有相同父节点标识符的节点归类到一个数组中,作为父节点的子节点。 - 递归调用该方法,直到所有节点都被处理完毕。 4. 展开与折叠:通过点击来展开或折叠子节点。 - 在点击事件处理函数中,判断当前是否已展开。 - 如果已展开,则将其从已展开的数组中移除。 - 如果未展开,则将其加入已展开的数组中。 - 更新表格的展开属性。 以上是将 iView UI 的列表表格设计成树形列表的一般步骤,请根据实际需求进具体的配置和数据处理。希望对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值