<el-table-column文字居中
时间: 2023-11-08 14:00:44 浏览: 46
<el-table-column>元素可以通过在其上添加align='center'属性来使表格列中的文本居中。例如:<el-table-column label="姓名" prop="realname" align="center"></el-table-column>。这样做可以确保该列中的文本内容在水平方向上居中对齐。
相关问题
将lable字居中:<el-table-column label="药品名称"> <template slot-scope="scope"> <div class="shangpin"> <el-image style="width: 100px; height: 100px" :src="baseUrl + scope.row.picture" fit="fill"></el-image> <span style="margin-left: 10px">{{ scope.row.goodname }}</span> </div> </template> </el-table-column>
你可以使用CSS来将label文字居中,如下所示:
```
<el-table-column label="药品名称" class="centered-label">
<template slot-scope="scope">
<div class="shangpin">
<el-image style="width: 100px; height: 100px" :src="baseUrl + scope.row.picture" fit="fill"></el-image>
<span style="margin-left: 10px">{{ scope.row.goodname }}</span>
</div>
</template>
</el-table-column>
<style>
.centered-label .cell {
text-align: center;
}
</style>
```
在el-table-column添加一个class为"centered-label",然后使用CSS将其中的.cell元素居中,这样就可以将label文字居中了。
<el-table-column ref="selects" type="selection" width="55" align="center" />
这是Element UI中的表格组件el-table-column的一个属性设置,用于在表格中添加一个选择列,用户可以通过该列选择需要操作的数据。具体属性解释如下:
- ref:设置该列的引用名称,方便在代码中进行操作。
- type:设置该列的类型,这里是selection,表示选择列。
- width:设置该列的宽度,这里是55px。
- align:设置该列的对齐方式,这里是居中对齐。
下面是一个示例代码,展示如何在Element UI的表格中添加选择列:
```html
<el-table :data="tableData" style="width: 100%">
<el-table-column ref="selects" type="selection" width="55" align="center" />
<el-table-column prop="name" label="姓名" />
<el-table-column prop="age" label="年龄" />
<el-table-column prop="address" label="地址" />
</el-table>
```