element-ui知识点

2019-07-15  本文已影响0人  aeborah

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">

这种方法的缺点是需要每一列都加属性,优点是可以不同列可以加不同属性,例如下列需求时可以使用:
数字列靠右,文字列靠左。

上一篇下一篇

猜你喜欢

热点阅读