antdesignvue表格使用fixed出现空白列——已解决

使用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>复制