a-table 嵌套子表格展开冲突问题

a-table在父子表格嵌套展示时如果不进行处理,容易出现展开子表将之前已展开子表数据覆盖的问题。为了解决这一问题我们需要加一些限制条件。

在父表格a-table标签内添加:record.key应是唯一标识,不然会出现子表格无法展开的情况。

:row-key="(record) => record.key" 
:expandedRowKeys="expandedRowKeys"

同时要在expand回调函数加入以下代码:

     getInnerData(expanded, record) {
        this.expandedRowKeys = []
        // 判断是否点开
        if (expanded) { 
           this.expandedRowKeys.push(record.key) 
        // 点开后执行。。。
        // 先将子级表格数据清空,否则之前点开别的行的数据也会在里面
          this.innerdata = [];
          // 再将父级点击的那一行的数据(record)给子级数据存进去,具体情况根据自己需求更改
          for(let i = 0;i <record.innerdata.length;i++){
            this.innerdata.push({
              key:i+1,
              id : record.innerdata[i].id,
              name : record.innerdata[i].name,
            })
          }
        }
      },

不要忘记给在data中添加expandedRowKeys:[]。

如何同时展开互不冲突的子表还没有实现,如果任何问题欢迎指正

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vxe-table是一个基于vue表格组件,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等... 设计理念: 面向现代浏览器,高效的简洁 API 设计 模块化表格、按需加载、插件化扩展 为单行编辑表格而设计,支持增删改查及更多扩展,强大的功能的同时兼具性能 功能: Basic table (基础表格) Grid (高级表格) Size (尺寸) Striped (斑马线条纹) Table with border (带边框) Cell style (单元格样式) Column resizable (列宽拖动) Maximum table height (最大高度) Resize height and width (响应式宽高) Fixed column (固定列) Grouping table head (表头分组) Highlight row and column (高亮行、列) Table sequence (序号) Radio (单选) Checkbox (多选) Sorting (排序) Filter (筛选) Rowspan and colspan (合并行或列) Footer summary (表尾合计) Import (导入) Export (导出) Print (打印) Show/Hide column (显示/隐藏列) Loading (加载中) Formatted content (格式化内容) Custom template (自定义模板) Context menu(快捷菜单) Virtual Scroller(虚拟滚动) Expandable row (展开行) Pager(分页) Form(表单) Toolbar(工具栏) Tree table (树形表格) Editable CRUD(增删改查) Validate(数据校验) Data Proxy(数据代理) Keyboard navigation(键盘导航) Modal window(模态窗口) Charts(图表工具) 更新日志: v4.0.20 table 修改单选框、复选框获取值错误问题 grid 修复 KeepAlive 中报错问题
### 回答1: j-vxe-table是一个基于Vue.js构建的表格组件。它支持嵌套子表格,以一种清晰而有条理的方式呈现信息。 嵌套子表格是指在主表格中,某一行的数据可以展开显示其子表格,来呈现该行数据的更详细信息。j-vxe-table实现子表格的方式是通过在主表格的某一列中嵌套另一个表格组件,通过设置相关属性,将该表格组件的数据与主表格中该行数据相关联,从而在子表格中显示其详细信息。 使用j-vxe-table嵌套子表格需要注意以下几点: 1. 在主表格中定义哪一列需要展开子表格,并在该列对应的项中设置相应的属性,以告知j-vxe-table要显示子表格。 2. 在进行子表格的自定义时,需要使用j-vxe-table内置的组件和相关样式类,从而实现子表格的样式和结构。 3. 子表格和主表格数据的关联和传递需要使用Vue.js的自定义指令和事件来实现。 4. 可以通过配置j-vxe-table的属性来限制子表格的最大展示层数,从而避免嵌套子表格过度而导致页面混乱。 综上所述,j-vxe-table嵌套子表格是一种非常实用的数据展示方式,在需要呈现大量复杂数据时,可以极大地提升页面的可读性和易用性。但需要注意,在使用过程中,需要对j-vxe-table的属性和使用方法有一定的理解和掌握,才能发挥出其最大的效用。 ### 回答2: j-vxe-table是一款基于Vue.js开发的表格组件库。它支持各种常见的表格功能,如分页、排序、过滤、编辑、导出等,还可以轻松实现多级表头、合并单元格和树形表格等高级功能,非常方便实用。 对于嵌套子表格的需求,j-vxe-table同样可以轻松胜任。具体实现方法如下: 1. 首先,我们需要在父表格的列模板中添加一个slot,用于显示子表格。例如: ``` <template> <div> <vxe-table :data="tableData"> <vxe-table-column type="selection"></vxe-table-column> <vxe-table-column field="name" title="姓名"></vxe-table-column> <vxe-table-column field="age" title="年龄"></vxe-table-column> <!-- 添加子表格的列 --> <vxe-table-column label="详情"> <template #default="{row}"> <vxe-table :data="row.children"> <vxe-table-column field="address" title="地址"></vxe-table-column> <vxe-table-column field="phone" title="电话"></vxe-table-column> </vxe-table> </template> </vxe-table-column> </vxe-table> </div> </template> ``` 在这个例中,我们添加了一个名为“详情”的列,它的模板中嵌套了一个子表格。子表格的数据通过父表格中每一行的“children”属性来获取。 2. 接下来,我们需要对子表格进行一些配置。首先,我们需要为子表格的列设置“small”属性,这样它可以与父表格中的数据对齐。另外,我们还需要添加“highlight-row”属性,以便在子表格中高亮显示当前行。例如: ``` <vxe-table :data="row.children" highlight-row :table-dynamic="{ 'scroll-y': '200px' }"> <vxe-table-column field="address" title="地址" width="120" small></vxe-table-column> <vxe-table-column field="phone" title="电话" width="140" small></vxe-table-column> </vxe-table> ``` 在这个例中,我们通过“table-dynamic”属性对子表格设置了一个垂直滚动条,以便在数据较多时进行滚动浏览。 3. 最后,我们还需要在父表格子表格中添加一些事件处理函数,以便处理用户的交互事件。例如,我们可以在父表格中添加一个“expand-change”事件,以便在用户展开或收起子表格时显示不同的icon。另外,我们还可以在子表格中添加“edit-closed”事件,以便在用户修改数据后自动保存并更新父表格中的数据。 总之,j-vxe-table嵌套子表格非常方便实用,大大提高了表格组件的灵活性和交互性。如果你正在开发一个需要嵌套表格的项目,那么j-vxe-table绝对是一个值得推荐的工具。 ### 回答3: J-vxe-table是一个基于Vue.js的表格组件库,提供了许多丰富的表格特性和功能。其中,嵌套子表格是魅力之一。在实际应用中,我们常常需要在一个父级表格嵌套多个表格,以展示更详细的信息。 J-vxe-table通过提供类似于树形菜单的展示形式来实现嵌套子表格。我们可以通过设置columns、data等属性来初始化父级表格,并通过table-expand属性来启用嵌套子表格的展示。 在父级表格中,我们需要使用table-expand来定义“展开”自定义列,该列需要设置type为“expand”,并提供一个自定义的渲染函数。在渲染函数中,我们可以通过slot-scope指令来访问父级表格的当前行数据,并使用vxe-grid组件来嵌套表格。通过设置columns、data等属性来初始化表格,最终实现嵌套子表格的展示。 值得注意的是,J-vxe-table嵌套子表格时,还提供了一些其他的特性和配置选项,如展开和收起行(table-expand-row、table-collapse-row)、展开和收起树形节点(tree-config)、带复选框的展开行(table-checkbox)等。这些特性和选项可以根据实际需求进行配置和定制,并且和嵌套子表格组合使用,可以为用户带来更多的交互和体验。 总之,J-vxe-table是一个功能强大的表格组件库,其嵌套子表格特性可以为我们提供更加灵活和丰富的表格展示方式。在应用中,我们可以根据实际需求,通过适当的配置和定制,让J-vxe-table更好地服务于我们的业务需求。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值