ant design vue 设置template风格的table各个column所占百分比
时间: 2023-05-31 22:05:01 浏览: 150
用于设置ant-design-vue中table组件的列宽可拖拽
在 Ant Design Vue 的 table 组件中,可以通过设置 `width` 属性来控制每个 column 的宽度占比。例如:
```html
<a-table :columns="columns" :data-source="data">
<!-- 设置列宽 -->
<template slot="name" slot-scope="{ text }">
<span :style="{ width: '30%' }">{{ text }}</span>
</template>
<template slot="age" slot-scope="{ text }">
<span :style="{ width: '20%' }">{{ text }}</span>
</template>
<template slot="address" slot-scope="{ text }">
<span :style="{ width: '50%' }">{{ text }}</span>
</template>
</a-table>
```
在上面的例子中,通过在每个 column 的 `slot` 中设置一个 `<span>` 元素,并设置其宽度占比来实现表格的模板风格和自定义列宽。
阅读全文