element UI 中表格el-table设置表头文字和表格内容居中显示
分类:计算机 | 前端 | ElementUI | 综合 582
更新:2021-04-13 21:09:26编辑
表头文字和表格内容都居中
这个比较简单,直接在el-table-column中添加属性align="center"即可,代码如下:
<el-table :data="tableData" style="width: 80%" border height="360">
<el-table-column prop="name" label="姓名" width="100" align="center">
</el-table-column>
</el-table>
只设置表头文字居中,表格内容不设置居中
- 在el-table的标签添加一个属性方法(:header-cell-style="headClass")
- 在methods中设置一个headClass方法
<el-table :data="tableData" style="width: 80%" border height="360" :header-cell-style="headClass">
<el-table-column prop="name" label="姓名" width="100" align="center">
</el-table-column>
</el-table>
methods: {
headClass() { //表头居中显示
return "text-align:center"
},
}
猿导航
阅读排行榜
- 1vue和el-table使用经验-如何刷新表格数据6505
- 2uni-app使用经验—vue页面和html页面如何互相调用接口并传参3403
- 3nuxt.js项目中如何添加和使用全局变量1922
- 4如何用批处理命令(bat脚本)启动和停止windows服务1914
- 5nuxtjs asyncData使用经验—如何发起多个axios请求并携带参数1806
- 6Spring学习经验—@ResponseBody注解的使用说明1788
- 7Druid异常解决经验—java.sql.SQLException url not set1761
- 8解决SpringBoot使用maven下载不了jar包的问题1743
- 9Intellij IDEA下的版本控制VCS的启用与关闭1736
- 10linux如何成功地离线安装docker1618
- 11在Nuxt.js项目的head中引用外部js文件1586
- 12Nuxt.js项目实现路由鉴权和用户登录1575
- 13软件项目管理——详细设计说明书模板11538
- 14Windows中使用Nginx解决前后端分离部署中的跨域问题1479
- 15Element-UI学习经验——el-switch开关的用法1415