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 的值，例如使用一个固定的像素值，来控制表格的水平滚动和列宽度。

原文地址：https://blog.csdn.net/JustWantToFly/article/details/140828125

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！