一劳永逸！Ant Design Vue2表格a-table左右fixed固定列的行高与内容区域的行高不一致怎么办？

前端

2023-07-06 12:32:16

解决Ant Design Vue2表格左右fixed固定列行高不一致的终极指南

**子

问题概述
导致原因
解决方案
示例代码
效果展示
总结

问题概述

使用Ant Design Vue2表格（a-table）时，您可能会遇到左右fixed固定列的行高与内容区域的行高不一致的问题。这不仅影响了表格的整体美观，还会导致数据显示不正确。

导致原因

这个问题是由flex布局造成的。Ant Design Vue2表格使用flex布局，而flex布局默认根据内容高度计算行高。因此，当固定列内容高度与内容区域内容高度不同时，就会出现行高不一致的问题。

解决方案

要解决此问题，可以使用CSS样式强制固定列的行高与内容区域的行高一致。

示例代码

<template>
  <a-table :columns="columns" :data="data" />
</template>

<script>
import { Table } from 'ant-design-vue';

export default {
  components: {
    Table,
  },
  data() {
    return {
      columns: [
        { title: '姓名', dataIndex: 'name', fixed: 'left', width: 100 },
        { title: '年龄', dataIndex: 'age', fixed: 'right', width: 100 },
        { title: '地址', dataIndex: 'address' },
      ],
      data: [
        {
          name: '张三',
          age: 20,
          address: '北京市海淀区',
        },
        {
          name: '李四',
          age: 30,
          address: '上海市浦东新区',
        },
        {
          name: '王五',
          age: 40,
          address: '广州市天河区',
        },
      ],
    };
  },
};
</script>

<style>
  .ant-table-fixed-left,
  .ant-table-fixed-right {
    height: 100%;
  }
</style>