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)!