200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > el-table 设置表头居中 表格内容某一列单独居中或左对齐或者右对齐

el-table 设置表头居中 表格内容某一列单独居中或左对齐或者右对齐

时间:2020-06-01 09:50:00

相关推荐

el-table 设置表头居中  表格内容某一列单独居中或左对齐或者右对齐

方法:

表头可以用::header-cell-style="{'text-align':'center'}"

具体列可以分别设置align="left"align="center"align="right"

实例:

可以用elementui 官方的例子做演示:

Element - The world's most popular Vue UI frameworkElement,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库/#/zh-CN/component/table

默认是左对齐:

我们修改之后:

效果:

表头全部居中了;

3列内容,分别左对齐、居中、右对齐

代码:

<template><el-table :data="tableData" border stripe :header-cell-style="{'text-align':'center'}" style="width: 100%"><el-table-column prop="date" label="日期" align="left" width="180"></el-table-column><el-table-column prop="name" label="姓名" align="center" width="180"></el-table-column><el-table-column prop="address" label="地址" align="right" width="260"></el-table-column></el-table></template>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。