ant design vue 的table指定 column 的 width 属性,不会自适应了
时间: 2024-03-11 18:49:37 浏览: 17
Ant Design Vue 的 Table 组件默认情况下是自适应的,但是你可以通过设置 `width` 属性来指定某一列的宽度。
如果你设置了某一列的宽度,那么该列的宽度将不再自适应,并且如果表格总宽度小于所有列宽度之和,那么会出现横向滚动条。
如果你希望某一列的宽度随着表格宽度的变化而自适应,可以设置 `min-width` 属性,同时将该列的 `width` 属性设置为 `0`。这样该列的宽度会自适应,但是不会小于 `min-width`。
例如:
```vue
<template>
<a-table :columns="columns" :data-source="data">
<!-- 第一列自适应 -->
<template slot="name" slot-scope="text">{{ text }}</template>
<!-- 第二列固定宽度,不自适应 -->
<template slot="age" slot-scope="text">{{ text }}</template>
</a-table>
</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>
```