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

原创

已于 2025-05-19 14:56:57 修改 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html #ant-design-vue

于 2024-07-31 17:23:18 首次发布

<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",