场景描述:
这个需求的场景很简单,表头自定义居中显示
 <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. 【JavaScript】随机生成10个0~100的数字

    随机生成10个0~100不重复的数字(包含0和100): 需要用到的知识点:随机数 去重 下面放代码 <!DOCTYPE html> <html> <head> & ...

  2. Node.js——请求头

    var http = require('http') var server = http.createServer(); server.on('request', function (req, res ...

  3. 迅为7寸工业触摸屏嵌入式平台可用于ARM嵌入式一体机

    7寸触摸屏介绍产品名称:7寸IPS高清屏幕分辨率:1280*800触摸屏类型:电容屏(五点触摸)接线方式: FPC 可应用于嵌入式一体机.自动售货机.广告机.智能自动终端.零售终端等 ARM平台处理器 ...

  4. hibernate5.3版本出现hibernate中The server time zone value“乱码”问题的解决办法。

    <!-- 配置关于数据库连接的四个项 driverClass url username password --> <property name="hibernate.con ...

  5. WebService 服务开发

    开发 WebService 服务首先需要根据接口的要求编写相关的 wsdl 文件.编写 wsdl 文件需要先对 XML 语法.XML Schema 语法以及 SOAP 语法有一些简单了解. 假设需要提 ...

  6. python3+beautifulSoup4.6抓取某网站小说(二)基础功能设计

    本章学习内容:1.网页编码还原读取2.功能设计 stuep1:网页编码还原读取 本次抓取对象: http://www.cuiweijuxs.com/jingpinxiaoshuo/ 按照第一篇的代码来 ...

  7. [Python3网络爬虫开发实战] 1.5.1-PyMySQL的安装

    在Python 3中,如果想要将数据存储到MySQL中,就需要借助PyMySQL来操作,本节中我们介绍一下它的安装方式. 1. 相关链接 GitHub:https://github.com/PyMyS ...

  8. 零基础入门学习Python(12)--列表:一个打了激素的数组(3)

    前言 这节课我们继续谈一下Python列表一些知识 知识点 Python常用操作符 比较操作符 >>> list1 = [123] >>> list2 = [234 ...

  9. 树莓派 - 驱动hello

    树莓派上Linux驱动,从hello world 开始 ... hello.c #include <linux/init.h> #include <linux/module.h> ...

  10. mysql You can't specify target table 'sys_org_relation' for update in FROM clause 删除表条件不能直接包含该表

    mysql中You can't specify target table for update in FROM clause错误的意思是说,不能先select出同一表中的某些值,再update这个表( ...