ant design vue 的table指定 column 的 width 属性,不能横向滚动了
时间: 2024-03-11 20:49:45 浏览: 26
如果你设置了某一列的宽度,那么该列的宽度将不再自适应,并且如果表格总宽度小于所有列宽度之和,那么会出现横向滚动条。
如果你设置了某一列的 `width` 属性,但是表格没有出现横向滚动条,可能是因为表格容器的宽度被限制了。你可以通过设置表格容器的 `max-width` 或者 `width` 属性来解决这个问题。
例如:
```vue
<template>
<div style="max-width: 800px;">
<a-table :columns="columns" :data-source="data" scroll="{ x: 800 }">
<!-- 第一列宽度自适应 -->
<template slot="name" slot-scope="text">{{ text }}</template>
<!-- 第二列固定宽度 -->
<template slot="age" slot-scope="text">{{ text }}</template>
</a-table>
</div>
</template>
<script>
export default {
data() {
return {
columns: [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
width: 0, // 自适应
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
width: 100, // 固定宽度
},
],
data: [
{ name: '张三', age: 20 },
{ name: '李四', age: 30 },
{ name: '王五', age: 40 },
],
};
},
};
</script>
```
上面的例子中,我们给表格容器设置了最大宽度为 800px,同时给表格设置了横向滚动条的宽度为 800px,这样就可以在表格总宽度大于 800px 的情况下出现横向滚动条了。