场景描述:
这个需求的场景很简单,表头自定义居中显示
 <el-table-column show-overflow-tooltip prop="telephone" label="填写 但不完整" width="100" :render-header="renderHeader">
</el-table-column>
renderHeader(createElement, { column, _self }) {
let label = column.label;
let labelArr = label.split(' ');
return createElement(
'div',
{
'class': 'header-center'
},
[
createElement('div', {
attrs: { type: 'text' },
}, [labelArr[0]]
),
createElement('div', {
attrs: { type: 'text' },
}, [labelArr[1] || '']
)
]
);
},

效果图:

element-ui自定义table表头的更多相关文章

  1. (Element UI 组件 Table)去除单元格底部的横线

    Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...

  2. element ui设置表格表头高度和每一行的高度

    填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...

  3. element ui的table的头部自定义

    <el-table-column label="级别" min-width="120" prop="clueLevel" align= ...

  4. element-ui自定义table表头,修改列标题样式

    elementUI table表格一般的样式是这样的: 但是要改变表头是比较麻烦的一个事情,但是往往有些项目是需要的比如改成如下样式: 一般直接改起来挺麻烦,好在官网提供了一个方法:render-he ...

  5. Element UI的Table用法

    Table 表格 用于展示多条结构类似的数据,可对数据进行排序.筛选.对比或其他自定义操作. ¶基础表格 基 2016-05-02 王小虎 上海市普陀区金沙江路 1518 弄 2016-05-04 王 ...

  6. element-ui自定义table表头,修改标题样式、添加tooltip及 :render-header使用简介

    修改列标题样式1.在列标题后面加一个图标. 以element-ui官方文档一个table表格为例,我们在地址的后面加一个定位标志的图标,代码如下: <template> <el-ta ...

  7. Element Ui中table实现表格编辑效果

    主要以css实现 .tb-edit .el-input, .tb-edit .el-input-number, .tb-edit .el-select { display: none; width: ...

  8. element ui 合计/table show-summary

    在el-table 上面加上show-summary就可以对table的数据进行合计 但是上次出现了合计栏有的为空,有的合计不对的情况,如果出现的是空,那么说明你渲染的数据有undefine(即后台返 ...

  9. element ui 自定义异步验证

    之前提到过,axios是一个异步请求,但是很多时候我们都需要同步请求,比如在element的表单验证中需要验证一个用户名是否存在的时候,异步请求好像就不太好用了.前边博客中提到过,这种情况可以用es6 ...

随机推荐

  1. 忘记dba用户密码,利用SQLPlus重置dba密码

    打开SQL Plus 输入用户名: sys as sysdba 输入口令:可直接回车 连接到: Oracle Database 11g Enterprise Edition Release 11.2. ...

  2. 【译】x86程序员手册40-10.5初始化的例子

    10.5 Initialization Example初始化的例子 译注:本来想把这个例子全部注释完,但由于对intel汇编实不熟悉,有太多的伪指令,本人也是免强看懂,所以就不再做翻译了. $TITL ...

  3. java的回调方式

    经常写js的回调,js的回调很简单,直接传方法名称,但是java中方法不能作为参数传递 但是java中可以传一个对象,在对象中编写多个方法,然后作为参数传递到对象里以后,就可以在适当的时机调用该对象里 ...

  4. ALTER TABLE - 修改表的定义

    SYNOPSIS ALTER TABLE [ ONLY ] name [ * ] ADD [ COLUMN ] column type [ column_constraint [ ... ] ] AL ...

  5. 类方法__setattr__,__delattr__,__getattr__

    __getattr__,_delattr_,_getattr_ class Foo: x = 1 def __init__(self, y): self.y = y def __getattr__(s ...

  6. CAD参数绘制圆弧(网页版)

    在CAD设计时,需要绘制圆弧,用户可以在图面点圆弧起点,圆弧上的一点和圆弧的终点,这样就绘制出圆弧. 主要用到函数说明: _DMxDrawX::DrawArc2 由圆弧上的三点绘制一个圆弧.详细说明如 ...

  7. vue脚手架引入swiper

    方法一: 下载swiper: npm install swiper --save-dev swiper4.0使用入口:http://www.swiper.com.cn/usage/index.html ...

  8. java.util.MissingResourceException: Can't find bundle for base name db, locale zh_CN

    在使用Bundle来加载配置文件的时候, 爆出了这个错误: 原因? 没有找到需要加载的配置文件,因为配置文件必须放在src目录下面, 如果放进了com.bj186.crm的包下面,就必须添加包的名称到 ...

  9. JavaSE-19 IO

    学习要点 File类操作文件和目录的属性 字节流读写文件 字符流读写文件 字节流读写二进制文件 文件操作 1  文件的定义 文件可认为是相关记录或放在一起的数据的集合.文件一般保存在硬盘.U盘.光盘. ...

  10. HDU—4463 Outlets 最小生成树

    In China, foreign brand commodities are often much more expensive than abroad. The main reason is th ...