共计 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)
})
},
最初贴一张改变后的效果图
正文完