vue antd table设置 sorter: true，导致表头高度不一致

你好！对于Vue Antd中的表格组件，当设置sorter为true时，可能会导致表头高度不一致的问题。这是因为当排序功能开启时，表头会显示排序图标，而排序图标会占据一定的高度，从而导致表头的高度不一致。

解决这个问题的方法是使用自定义表头的方式，通过自定义表头的样式来控制高度。你可以通过以下步骤来实现：

1. 首先，在表格组件中设置sorter为true，开启排序功能。

2. 然后，在自定义表头的样式中，给表头设置一个固定的高度，例如：

.custom-header {
  height: 50px;
}

3. 最后，在表格组件中使用自定义表头，并添加自定义表头的类名，例如：

<template>
  <a-table :columns="columns" :data-source="data">
    <template slot="title">
      <div class="custom-header">
        {{ columns[0].title }}
      </div>
    </template>
  </a-table>
</template>

通过以上步骤，你可以自定义表头的高度，从而解决表头高度不一致的问题。希望对你有所帮助！如果还有其他问题，请随时提问。

相关问题

antd vue a-tabel 设置表头属性：斜线表头的制作方法

要创建斜线表头，可以使用 `colSpan` 和 `rowSpan` 属性来合并单元格。以下是示例代码：

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

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: "A / B",
          children: [
            {
              title: "A",
              dataIndex: "a",
              colSpan: 2
            },
            {
              title: "B",
              dataIndex: "b",
              colSpan: 0
            }
          ]
        },
        {
          title: "C / D",
          children: [
            {
              title: "C",
              dataIndex: "c",
              colSpan: 0
            },
            {
              title: "D",
              dataIndex: "d",
              colSpan: 2
            }
          ]
        }
      ],
      data: [
        {
          key: "1",
          a: "1",
          b: "2",
          c: "3",
          d: "4"
        },
        {
          key: "2",
          a: "5",
          b: "6",
          c: "7",
          d: "8"
        }
      ]
    };
  }
};
</script>

在表头中，我们使用了 `children` 属性来创建表头分组。对于每个分组，我们使用 `colSpan` 属性来设置每个单元格所占的列数，从而创建斜线表头。在数据列中，我们只需要添加相应的数据即可。

希望这个方法能够满足你的需求！

antd vue 的table组件如何更改表头背景色

可以通过 `headerStyle` 属性来设置表头的背景色。具体实现方法如下：

<template>
  <div>
    <a-table :columns="columns" :data-source="dataSource" bordered>
      <template #header="props">
        <th :style="props.column.headerStyle">{{ props.column.title }}</th>
      </template>
    </a-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          headerStyle: { background: '#e6f7ff' }, // 设置表头背景色
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
        },
      ],
      dataSource: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park',
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
        },
      ],
    };
  },
};
</script>

在上面的代码中，我们通过 `headerStyle` 属性为第一列设置了表头的背景色为 `#e6f7ff`。

需要注意的是，这里的 `headerStyle` 属性是自定义的，antd vue 的 Table 组件并没有提供这个属性，因此需要自己定义并传递给表头的渲染函数。