el-table-column实现右侧对齐
时间: 2023-07-16 20:15:27 浏览: 92
可以使用 `align` 属性来实现 `el-table-column` 右对齐,将 `align` 属性设置为 `'right'` 即可。示例代码如下:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄" align="right"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
```
在上面的代码中,`align` 属性被设置为 `'right'` ,该属性会将该列中的所有内容都向右对齐。如果您需要只针对某些特定的单元格实现右对齐,可以在该单元格中使用 `style` 属性来设置样式,例如:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄">
<template slot-scope="scope">
<span :style="{textAlign: 'right'}">{{ scope.row.age }}</span>
</template>
</el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
```
在上面的代码中,使用了一个具名插槽来自定义 `el-table-column` 中的内容,并在其中使用了 `style` 属性来设置文本对齐方式。
阅读全文