使用antdesignvue表格时出现如下空白列:
原因:是我在代码中写了 :scroll="{ x: 2000 }"
,这样表格的长度不够时就会用空白列来填充。
解决办法:将x的值使用各列宽的和。
代码如下:
<template>
<div class="box">
<a-table
:rowKey="(record, index) => index"
:columns="columns"
:data-source="tableData"
bordered
:scroll="{ x: scrollX }"
>
<template v-slot:action>
<a href="javascript:;">Delete</a>
</template>
</a-table>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
columns: [
...
],
tableData: [
...
],
};
},
computed: {
// 动态获取scrollX,防止数组固定列的大小变化
scrollX() {
return this.columns.reduce((preVal, curVal) => {
return preVal + curVal.width;
}, 0);
},
},
created() {},
methods: {},
};
</script>