antd vue表格自适应高度问题
一个table组件复用,它只有一个scroll来控制表格下(不包含表头)的高度,所以我们得使表格高度自适应。<a-table:columns="columns":data-source="dataList":loading="!showTable"borderedsize="small":scroll="{ x: '100%', y: `calc(100vh - ${tableTop+280
·
一个table组件复用,它只有一个scroll来控制表格下(不包含表头)的高度,所以我们得使表格高度自适应。
<a-table
:columns="columns"
:data-source="dataList"
:loading="!showTable"
bordered
size="small"
:scroll="{ x: '100%', y: `calc(100vh - ${tableTop+280+'px'})` }"
:pagination="false"
>
计算表头高度部分,因为每次切换都是上一个表格的高度,所以我们需要把前一次表格的高度记录下来
mounted () {
const a = document.querySelector('.ant-table-header')
this.tableList = []
this.tableList.push(a.clientHeight)
this.tableList.push(a.clientHeight)
this.tableTop = this.tableList[0]
},
watch: {
columns () {
setTimeout(() => {
const a = document.querySelector('.ant-table-header')
this.tableList.push(a.clientHeight)
this.tableList.splice(0, 1)
this.tableTop = this.tableList[1]
}, 10)
}
},
更多推荐
已为社区贡献8条内容
所有评论(0)