el-table的表头文本居中,表格内容靠右的方法
1.给表格头设置样式的方法
sample1:这种方法可以加多种样式,颜色,背景色等等
<el-table :data="tableData"
v-loading="isloading"
:header-cell-style="getRowClass"
style="width:100%;">
getRowClass () {
...
}
sample2:项目中只需要方位设置,所以使用的是这种方法简单,便捷
但是这种只能设定所有的列都是同一方位
<el-table :data="tableData"
v-loading="isloading"
:header-cell-style="{'text-align':'center'}"
:cell-style="{'text-align':'left'}"
style="width:100%;">
2.利用element-ui自带的属性(Table-column Attributes)
<el-table-column fixed="left"
label=""
header-align="center"
align="left"
v-if="mode!==modeCollection.REFERENCE"
width="80">
这种方法的缺点是需要每一列都加属性,优点是可以不同列可以加不同属性,例如下列需求时可以使用:
数字列靠右,文字列靠左。
网友评论