小楼窗外的细雨 2019-11-30 11:12 采纳率: 100%
浏览 1376
已采纳

Vue iview table如何渲染expandRow子表格?

首先,我渲染expandRow是这样的渲染方法——通过render来渲染的:
图片说明

然后,现在碰到的问题是,当我点击行的时候,我想往params.row里面插入数据,**这个数据是要通过接口返回获取的**。

于是,我就把这个请求放在了render里面,然后把return放在请求方法里面。然而,这样做的话,expandRow就不执行渲染了,打debugger也不会跳转到这里,肯定是出bug了...

如果把请求放在外边的话:

  1. 都是先执行渲染,才到请求的,所以,数据没有变化...
  2. 我担心到时候,点击别的行的话,会干扰到前面点击展示的expandRow数据。

所以,还能有什么办法去解决这个render里面的params赋值和修改值的问题呢?

  • 写回答

1条回答 默认 最新

  • wusp1994 2023-04-06 14:36
    关注

    在Vue iView的Table组件中,要渲染expandRow子表格,可以通过render函数来实现。

    例如,您可以在render函数中返回一个包裹了Table组件的div标签,并设置子表格的数据。

    <template>
       <Table
          :columns="tableColumns"
          :data="tableData"
          :expanded-row-render="renderExpandedRow"
       ></Table>
    </template>
    <script>
       export default {
          data () {
             return {
                tableColumns: [
                   // 表格列定义
                ],
                tableData: [
                   // 表格数据
                ]
             }
          },
          methods: {
             renderExpandedRow (params) {
                // params是Object类型,包含了当前行的所有数据和索引
                return (
                   <div>
                      <Table
                         :columns="subTableColumns"
                         :data="params.row.subTableData"
                      ></Table>
                   </div>
                )
             }
          }
       }
    </script>
    

    在这个例子中,渲染expandRow子表格的方法是通过render-expanded-row属性来实现的。在renderExpandedRow方法中,我们可以通过params参数来获取当前行的数据以及索引。在返回的JSX代码中,我们构建了包含子表格的div标签,通过subTableColumnsparams.row.subTableData来指定子表格的列和数据。

    关于render函数的参数问题,如果您在render函数中需要对参数进行修改,可以先将参数赋值给另一个变量,再对该变量进行修改。例如:

    render (h, { row, column, index }) {
       let temp = row[column.key] + 1; // 将参数赋值给一个变量
       temp = temp * 2; // 修改这个变量的值
       return <span>{temp}</span>;
    }
    

    在这个例子中,我们将row[column.key]的值赋值给了一个变量temp,然后对temp进行修改,最后返回修改后的结果。这样做可以避免直接修改参数带来的副作用。

    如果您还有其他问题或者需要更详细的解答,请提供更具体的问题描述和代码示例,以便我们更好地为您解决问题。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 已采纳回答 4月7日

悬赏问题

  • ¥15 flask项目,怎么使用AJAX传数据库数据到echarts图表的data里,实现异步加载数据。
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?