场景描述:
这个需求的场景很简单,表头自定义居中显示
 <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. [BZOJ4815][CQOI2017]小Q的表格 数论+分块

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4815 题目中所给条件中的$(a,a+b)$和$(a,b)$的关系很瞩目. 然后大家都知道$ ...

  2. lua使用lfs.dll库进行文件操作

    在项目开发中,为了提高开发效率往往需要开发一些辅助工具.最近在公司用lua帮拓展了一个资源扫描的工具,这个工具的功能就是从原始demo下指定目标资源文件,对该文件进行读取并筛选过滤一遍然后拷贝到最终d ...

  3. windows 下使用sqlplus

    1.连接数据库 找到tnsnames.ora 监听器配置 TESTDB = (DESCRIPTION = (ADDRESS = (PROTOCOL = TCP)(HOST = "服务器端ip ...

  4. Context namespace element 'annotation-config' and its parser class [org.springframework.context.annotation.AnnotationConfigBeanDefinitionParser]

    严重: Exception sending context initialized event to listener instance of class org.springframework.we ...

  5. Java Hello World 错误 找不到或无法加载主类

    Java 有几年没用了 生疏了好多 最近又捡起来 结果第一个Hello World 就在黑窗口内报错! 遇到几个小问题. 1. 安装JDK后 在 CMD 中 执行 java -version 正常 因 ...

  6. K近邻法(K-Nearest Neighbor,KNN)

    KNN是一种基本分类与回归方法,本篇只总结分类问题中的KNN. 输入:样本的特征向量,对应于特征空间中的点 输出:样本的类别,可取多类 算法思想:给定一个样本类别已知的训练数据集,对于新样本,根据其K ...

  7. 07CSS表格

    CSS表格 表格边框 如需在 CSS 中设置表格边框,请使用 border 属性. table, th, td { border: 1px solid blue; } 折叠边框 border-coll ...

  8. 【原】简单shell练习(二)

    1.查找awk # cat /etc/passwd |awk -F ':' 'BEGIN {print "name,shell"} {print $1","$7 ...

  9. 零基础入门学习Python(23)--递归:这帮小兔崽子

    知识点 我们都知道兔子繁殖能力是惊人的,如下图: 我们可以用数学函数来定义: 假设我们需要求出经历了20个月后,总共有多少对小兔崽子? 迭代实现 def fab(n): n1 = 1 n2 = 1 n ...

  10. 【面试题】LRU算法及编码实现LRU策略缓存

    概念 LRU(least recently used)就是将最近不被访问的数据给淘汰掉,LRU基于一种假设:认为最近使用过的数据将来被使用的概率也大,最近没有被访问的数据将来被使用的概率比较低. 原理 ...