element UI 中表格的居中显示

一、表头内容居中

方法一、

在每个el-table-column标签上边设置header-align="center"

<el-table-column
            prop="id"
            label="ID"
            header-align="center">
</el-table-column>

在这里插入图片描述

方法二、

1、在el-table的标签添加一个属性方法::header-cell-style="headStyle"
在这里插入图片描述

2、在methods中设置一个headStyle方法

<el-table
        :data="tableData"
        :header-cell-style="headStyle"> 
</el-table>
methods: {
            headStyle(){
                return "text-align:center"
            }
        }

二、表格内容居中

方法一、

在每个el-table-column标签上边设置align="center"
在这里插入图片描述

<el-table-column
		prop="id"
		label="ID"
		align="center">
</el-table-column>

方法二、

1、在el-table标签中添加属性:cell-style="rowStyle"
2、在methods方法中定义方法rowStyle

<el-table
      :data="tableData"
      :cell-style="rowStyle">
</el-table>
 methods: {
            rowStyle(){
                return "text-align:center"
            }
}

在这里插入图片描述

  • 4
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
<p> 本课程适合有JAVA和数据库基础的人员。 </p> <p> 本课程使用Eclipse和<span style="font-size:13.3333px;">IntelliJ IDEA两种开发工具,详细的讲解了MyBatis的各种语法,并且讲解了MyBatis逆向工程和MyBatis两种常用的插件:MyBatis Plus和通用Mapper。</span> </p> <p> <span style="font-size:13.3333px;">本课程从理论和实际案例两方面充分讲解了MyBatis的各种技术细节,和应用场景,并且以绘图的方式讲解了各种MyBatis较难的技术点。</span> </p> <p> <span style="font-size:13.3333px;">相信可以通过本课程的学习,读者能够掌握MyBatis学习过程的各种技巧和实际案例。</span> </p> <p> <span style="font-size:13.3333px;">本课程设计的大致技术点,如下所示。</span> </p> <p>       1.Eclipse、IntelliJ IDEA环境下开发MyBatis </p> <span></span>      2.MyBatis多种方式的CRUD<br />       3.MyBatis配置文件详解<br />       4.MyBatis映射文件详解<br />       5.使用MyBatis调用存储过程<br />       6.动态SQL<br />       7.关联查询<br />       8.延迟加载<br />       9.整合一级、二级缓存<br />       10.逆向工程<br />       11.事务操作<br />       12.MyBatis处理多个参数的问题<br />       13.鉴别器和别名<br />       14.各种方式的模糊查询<br />       15.MyBatis核心源码分析<br />       16.MyBatis拦截器<br />       17.MyBatis批量更新操作<br />       18.PageHelper<br />       19.MyBatis Plus详解<br />       20.通用Mapper详解<br /><p>    希望大家可以通过本课程的学习,深入的掌握MyBatis及其各种插件的用法,从而提高对数据的操作效率 </p> <p> <br /></p>
相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页

打赏

水木Moira

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者