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