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

关于Antd中table列Fixed导致的expandedRowRender展开行错位问题_第1张图片

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

关于Antd中table列Fixed导致的expandedRowRender展开行错位问题_第2张图片

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

解决办法:


        
        
        
        
      
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 = `
` }, 0) }) },

最后贴一张改动后的效果图
关于Antd中table列Fixed导致的expandedRowRender展开行错位问题_第3张图片

你可能感兴趣的:(前端vue.jsantd)