首页 > 其他分享 >关于Antd中table列Fixed导致的expandedRowRender展开行错位问题

关于Antd中table列Fixed导致的expandedRowRender展开行错位问题

时间:2023-07-21 18:45:05浏览次数:36  
标签:rec expanded element expandedRowKeys key Antd expandedRowRender table row

右侧操作列的属性为fixed:'right'
在展开行时出现列错位的问题

打开element发现列属性设置为fixed后在DOM中是独立出来的

解决办法:

<a-table
        :columns="columns"
        :data-source="data"
        bordered
        :pagination="false"
        :scroll="{
          x: 1500,
          y: 'calc(100vh - 186px)',
          scrollToFirstRowOnChange: true,
        }"
        :row-key="record => record.key"
        :expanded-row-keys.sync="expandedRowKeys"
        @expand="expandedOneRow"
      >
        <a-table
          slot="expandedRowRender"
          slot-scope="record"
          :columns="columnsa"
          :data-source="record.exPandTable"
          :pagination="false"
        >
        </a-table>
        <template slot="progress" slot-scope="progress">
          <a-progress :percent="progress" />
        </template>
        
      </a-table>
expandedOneRow(expanded,rec){
      if(expanded){
        this.expandedRowKeys = [];
        this.expandedRowKeys.push(rec.key)
      }else{
        this.expandedRowKeys = [];
      }
      this.$nextTick(()=>{
        setTimeout(() => {
           const element = document.querySelectorAll(`[data-row-key='${rec.key}-extra-row']`)
        // 33 是td 的 padding 值 加 border值
        const height = element[0].getBoundingClientRect().height - 33
        element[1].childNodes[0].innerHTML = `<div style="height: ${height}px;"></div>`
        }, 0)
      })
    },

最后贴一张改动后的效果图

标签:rec,expanded,element,expandedRowKeys,key,Antd,expandedRowRender,table,row
From: https://www.cnblogs.com/panwudi/p/17572203.html

相关文章

  • Could not get list of tables from database. Probably a JDBC driver problem.
     在用myeclipse8.5M1反向生成代码时报错: Aninternalerroroccurredduring:"GeneratingArtifacts".Couldnotgetlistoftablesfromdatabase.ProbablyaJDBCdriverproblem.  =============================  尝试了更换工作空间、重装myeclipse、更换oracle驱动......
  • vue contenteditable编辑模式下,样式不生效
    换行后生成div,设置的样式没有生效 ***原因style标签上设置了scoped解决办法1、去掉style的scoped属性2、额外写一个style,不加scoped(vue支持多个style)<divclass="mainText-body"contenteditable="true"></div><stylelang="less"scoped>//删除......
  • 使用Stable Diffusion制作AI数字人视频的简明教程
    基本方法搞一张照片,搞一段语音,合成照片和语音,同时让照片中的人物动起来,特别是头、眼睛和嘴。语音合成语音合成的方法很多,也比较成熟了,大家可以选择自己方便的,直接录音也可以,只要能生成一个语音文件就行了。这里分享一个文字转语音的工具:https://ttsmaker.cn/,不用注册不用花钱......
  • 硬件笔记之黑苹果Ventura使用Drop DMR table配合disableIOMapperMapping quirks解决无
    0x00概述关键词:VT-d, appleVTD, 黑苹果,英特尔wifi蓝牙无法打开,AX210,WIFI6E,disableIOMapper,disableIOMapperMapping/*板U配置=>技嘉z590Master+10900kOS=>Ventura13.x引导=>OpenCore0.9.2蓝牙WIFI=>板载Intel®Wi-Fi6EAX210支持wifi6和蓝牙5.......
  • You can’t specify target table ‘aaa′ for update in FROM clause
    Youcan’tspecifytargettable‘aaa′forupdateinFROMclause使用MySQL执行DELETEFROM时,若子查询的FROM子句和更新/删除对象使用同一张表,会出现错误。针对“同一张表”这个限制,撇开效率不谈,多数情况下都可以通过多加一层SELECT别名表来变通解决,如下:DELETEFRO......
  • No suitable Java Virtual Machine could be found on your system. The version
    Java虚拟机简介与安装什么是Java虚拟机?Java虚拟机(JavaVirtualMachine,简称JVM)是一种能够运行Java字节码的虚拟机。它是Java语言的核心,提供了跨平台的特性,使得一次编写的Java代码可以在不同的操作系统上运行。JVM有两个主要的任务:将Java源代码编译成字节码。在各个操作系统上......
  • 由浅入深:Stable-Diffusion 原理解析01 —— 基本概念的介绍
    由浅入深:Stable-Diffusion原理解析01——基本概念的介绍由于实习工作需要,最近一段时间的学习,自己也对Stable-Diffusion有了一些基础的理解,在学习和阅读论文的过程中,发现信息比较碎片化,于是决定产出一个SD原理的系列解析。本系列相比于本人之前的代码阅读系列没那么“硬核......
  • java Table类第一行如何合并
    在Java中,要合并Table类的第一行,可以通过使用HTML的<th>标签来实现。<th>标签定义HTML表格中的表头单元格,可以用于合并单元格。首先,我们需要创建一个Table对象,并添加所需的行和列。然后,对于第一行中需要合并的列,我们可以使用<th>标签进行合并。以下是一个示例代码:importjava.io.*......
  • 【antd】Table 全选框部分禁用
    constrowSelection=userInfo.isManager==1||userInfo.isSuperAdmin==1?{onChange:(selectkeys)=>{setSelectedRowKeys(selectkeys)},}:{onChange:(selectkeys)=>{setSelectedRowKeys(selectkeys)},getCheckb......
  • mysql.innodb_table_stats not null but should be varchar(192) not null length
    MySQL中的innodb_table_stats字段问题在MySQL中,InnoDB是一种常见的存储引擎,它提供了许多高级功能和性能优化选项。其中一个重要的功能是表统计信息,这些统计信息在查询优化和执行计划生成过程中起着关键作用。然而,有时候在使用InnoDB存储引擎时,我们可能会遇到一个名为innodb_table_......