Ant design vue 嵌套表格 获取父表格id

记录个问题
事情是这样的,我原本用了一个嵌套表格,想实现的是这样的



然后我就写了
(只放关键代码)

 <a-table :columns="columns" :data-source="tableData" class="components-table-demo-nested" :showHeader='false' :pagination='false'>
        <a-table
          slot="expandedRowRender"
          :columns="innerColumns"
          :data-source="tableData[0].node"
          :pagination="false"
        >  
        </a-table>
      </a-table>

结果却是这样的


image.png

然后我就网上搜,想得到父表格的id,这样我就能得到tableData的key了,不然显示的都是tableData[0]的数据
就搜到说使用@expand方法,里边有两个参数,其中一个就是 record,就是父表格本行的数据,这样就可以对子表格的数据进行修改了,然后我就试了一下
(只放关键代码)

<a-table :columns="columns" :data-source="tableData" class="components-table-demo-nested" :showHeader='false' :pagination='false' @expand="expand">
       <a-table
         slot="expandedRowRender"
         :columns="innerColumns"
         :data-source="innerData"
         :pagination="false"
       >
         
       </a-table>
     </a-table>
 expand(expanded, record){
      this.innerData=record.node;
    }

结果就是,
点哪行,所有的子表格就都是哪行的数据,就是所有子表格的数据都一样了

image.png

最后,实际解决方法,使用slot-scope="record"就可以获取record中的数据了....
:data-source="record.bak_node" 相当于我把父级表格的每行里边的bak_node里边的数据赋值给子表格

<a-table :columns="columns" :data-source="tableData" class="components-table-demo-nested" :showHeader='false' :pagination='false' @expand="expand">
        <a-table
          slot="expandedRowRender"
          slot-scope="record"
          :columns="innerColumns"
          :data-source="record.bak_node"
          :pagination="false"
        > 
        </a-table>
      </a-table>

0.0,所以实际上并不需要获取父表格的id

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容