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>

猜你喜欢

转载自blog.csdn.net/weixin_42566993/article/details/129372243