首页 前端知识 antdesignvue表格使用fixed出现空白列——已解决

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

2024-02-05 11:02:31 前端知识 前端哥 131 755 我要收藏

使用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>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/1378.html
标签
评论
发布的文章

Web10--jQuery进阶

2024-02-19 09:02:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!