美文网首页
element-ui知识点

element-ui知识点

作者: aeborah | 来源:发表于2019-07-15 14:16 被阅读0次

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

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

    相关文章

      网友评论

          本文标题:element-ui知识点

          本文链接:https://www.haomeiwen.com/subject/yylnkctx.html