Vue开发学习笔记:a-table组件设置固定宽度,同时保持列自适应

<template>
  <a-table
    :columns="columns"
    :data-source="data"
    style="width: 300px; margin-left: 100px"
    :scroll="{ x: 'max-content' }"
  >
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: "Name", dataIndex: "name", key: "name", width: 150 },
        { title: "Age", dataIndex: "age", key: "age", width: 150 },
        { title: "Address", dataIndex: "address", key: "address" },
        { title: "phone", dataIndex: "phone", key: "phone" },
      ],
      data: [
        {
          key: "1",
          name: "John Brown",
          age: 32,
          address: "New York No. 1 Lake Park",
          phone: "New York No. 1 Lake Park",
        },
        {
          key: "2",
          name: "Jim Green",
          age: 42,
          address: "London No. 1 Lake Park",
          phone: "New York No. 1 Lake Park",
        },
        {
          key: "3",
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park",
          phone: "New York No. 1 Lake Park",
        },
      ],
    };
  },
};
</script>

在上面的示例中，将 scroll 属性设置为{x:'max-content'}，这将使表格的水平滚动适应内容的宽度。列的宽度可以根据内容自动调整，同时保持其他列固定宽度。

也可以根据需要调整 x 的值，例如使用一个固定的像素值，来控制表格的水平滚动和列宽度。