场景描述:
这个需求的场景很简单,表头自定义居中显示
 <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. Rxlifecycle使用详解,解决RxJava内存泄露问题

    http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/1122/3711.html

  2. shiro 通过jdbc连接数据库

    本文介绍shiro通过jdbc连接数据库,连接池采用阿里巴巴的druid的连接池 参考文档:https://www.w3cschool.cn/shiro/xgj31if4.html https://w ...

  3. Python学习 Day 12 调试 断言 logging pdb pdb.set_trace

    调试 第一种方法简单直接粗暴有效,就是用print把可能有问题的变量打印出来看看: >>> def foo(s): n= int(s) print '>>> n = ...

  4. js中cookie的操作

    JavaScript中的另一个机制:cookie,则可以达到真正全局变量的要求. cookie是浏览器 提供的一种机制,它将document 对象的cookie属性提供给JavaScript.可以由J ...

  5. 物联网初学者智能家居必备迅为iTOP-4412开发板

    更情点击了解:http://www.topeetboard.com 1.  手把手全视频教程: 第一部分:迅为电子开发板入门视频 第二部分:Linux系统编程 第三部分:Itop-4412开发板硬件设 ...

  6. 迅为电子4.3寸CAN总线工业平板电脑简介

    型号:iTOP-HMI043-C 4.3寸CAN总线工业平板电脑支持CAN通讯显示器,显示:显示尺寸:4.3英寸:分辨率:480×272 TFT液晶 65536色 :接口:支持CAN 2.0B:USB ...

  7. Android(java)学习笔记188:学生信息管理系统案例(SQLite + ListView)

    1.首先说明一个知识点,通常我们显示布局文件xml都是如下: setContentView(R.layout.activity_main): 其实每一个xml布局文件就好像一个气球,我们可以使用Vie ...

  8. 框架开发之Java注解的妙用

    注解的好处:1.能够读懂别人写的代码,特别是框架相关的代码.2.本来可能需要很多配置文件,需要很多逻辑才能实现的内容,就可以使用一个或者多个注解来替代,这样就使得编程更加简洁,代码更加清晰.3.(重点 ...

  9. chattr - 修改文件在Linux第二扩展文件系统(E2fs)上的特有属性

    SYNOPSIS(总览) chattr [ -RV ] [ -v version ] [ mode ] files... DESCRIPTION(描述) chattr 修改文件在Linux第二扩展文件 ...

  10. 手动配置webpack

    //注:“__dirname”是node.js中的一个全局变量,它指向当前执行脚本所在的目录.const path = require('path');const webpack = require( ...