关于前端:解决antdv组件固定某列fixed和展开某行expandedRowRender不能同时使用

解决 Ant Design Vue table 组件固定某列 (fixed) 和开展某行 (expandedRowRender) 不能同时应用以及管制只开展一行的问题

开发我的项目中时应用 antdv 发现 table 组件固定某列 (fixed) 和开展某行 (expandedRowRender) 不能同时应用。款式上不兼容。经大神指导，找到了方法，在此记录一下。

遇到的问题如下图：

问题形容：点击左侧的加号（+）开展一行时，固定在右侧的操作列款式不能适应整个整个 table 的高度。

解决办法 ：在开展行当前对独自固定列的 td 独自进行高度管制。
失常的成果如下：（从新定义红色区域的高度）

间接上代码：

    <!-- 这是外层 table，右侧操作栏固定在右侧 -->
     <a-table
        :columns="columns"
        :data-source="sourceData"
        table-layout="auto"
        :row-key="record => record.versionId"
        class="components-table-demo-nested"
        :pagination="pagination"
        :expanded-row-keys.sync="expandedRowKeys"
        :scroll="{x: true}"
        @change="handleTableChange"
        @expand="expandedOneRows"
      >
        <div slot="desc" slot-scope="text, record" class="update-desc">
          <a-tooltip placement="bottom">
            <template slot="title">
              <span v-html="record.updateDescHtml" />
            </template>
            {{record.updateDesc}}
          </a-tooltip>
        </div>
        <div slot="status" slot-scope="text, record, index">
          <a-switch checked-children="已公布" un-checked-children="未公布" :checked="record.checked" @change="(checked, item, i)=>onChange(checked, record, index)" />
        </div>
        <div slot="action" slot-scope="text, record">
          <a-button type="link" icon="eye" size="small" @click="viewRelease(record.versionId)">
            查看
          </a-button>
          <a-button type="link" icon="edit" size="small"  @click="handleRelease('edit', record)">
            编辑
          </a-button>
          <a-button type="link" icon="delete" size="small"  @click="delRelease(record)">
            删除
          </a-button>
        </div>
        <!-- 这是内层 table，用于开展 -->
        <a-table
          slot="expandedRowRender"
          :columns="innerColumns"
          :data-source="innerData"
          :pagination="false"
        >
          <div slot="num" slot-scope="text, record, index">{{index+1}}</div>
          <div slot="fileName" slot-scope="text, record" class="table-operation">
            <a :href="record.fileUrl">{{record.fileName}}</a>
          </div>
          <div slot="operation" slot-scope="text, record" class="table-operation">
            <a :href="record.fileUrl"> <a-icon type="eye" /> 下载 </a>
          </div>
        </a-table>
      </a-table>

在 expandedOneRows 办法里解决高度

  expandedOneRows(expanded, record) {
      // 管制只开展一行
      if (expanded) {
        // 开展前先清空，在赋值，只开展一行
        this.expandedRowKeys = []
        this.expandedRowKeys.push(record.versionId)
      } else {this.expandedRowKeys = []
      }
      //  解决 Ant Design Vue table 组件固定某列 (fixed) 和开展某行 (expandedRowRender) 不能同时应用
      this.$nextTick(() => {setTimeout(() => {const element = document.querySelectorAll(`[data-row-key='${record.versionId}-extra-row']`)
          // 计算须要开展高度，采纳 append dom 元素的形式撑开高度，间接批改高度，// 然而以后行触发 moursemove 事件 会触发 dom style 重置
          // 33 是 td 的 padding 值 加 border 值
          const height = element[0].getBoundingClientRect().height - 33
          element[1].childNodes[0].innerHTML = `<div style="height: ${height}px;"></div>`
        }, 0)
      })
    },