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

30次阅读

共计 965 个字符，预计需要花费 3 分钟才能阅读完成。

右侧操作列的属性为 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)
      })
    },

最初贴一张改变后的效果图

正文完