antd vue 实现自定义表头宽度

要实现自定义表头宽度，可以通过以下步骤：

1. 在表头的 columns 属性中，给需要自定义宽度的列添加 width 属性，如：

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

<script>
export default {
  data() {
    return {
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          width: 100 // 自定义宽度为 100px
        },
        {
          title: '年龄',
          dataIndex: 'age'
        },
        {
          title: '地址',
          dataIndex: 'address',
          width: 200 // 自定义宽度为 200px
        }
      ],
      ...
    }
  }
}
</script>

2. 在表格的 style 属性中，给表头添加自定义样式，如：

<template>
  <a-table :columns="columns" :data-source="data" style="width: 500px;">
    ...
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [...],
      ...
    }
  }
}
</script>

3. 在添加自定义样式时，需要考虑到表格本身的样式，推荐使用 scoped 样式，避免样式冲突，如：

<template>
  <a-table :columns="columns" :data-source="data" class="my-table">
    ...
  </a-table>
</template>

<style scoped>
.my-table .ant-table-thead th:nth-child(1) {
  width: 100px;
}
.my-table .ant-table-thead th:nth-child(3) {
  width: 200px;
}
</style>

<script>
export default {
  data() {
    return {
      columns: [...],
      ...
    }
  }
}
</script>

这样就可以实现自定义表头宽度了。