场景描述:
这个需求的场景很简单,表头自定义居中显示
 <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. 关于Android软键盘把布局顶上去的问题(一)

    最近接触到了一个登陆页面,布局最上面显示的是一个波纹的view,中间显示账号和密码的EditText,紧接着还有一个Button: 希望:点击EditText时,软键盘不能把波纹的view顶出去,也不 ...

  2. js 和 java 将时间倒计时显示

    需求:用户购买产品,创建了一个订单,但是还么有支付,此时给用户三十分钟剩余支付时间,前台页面做倒计时功能,时间到达时,更改订单状态 ,输出的格式是:29:23 java 实现 package com. ...

  3. codeforces_C. Maximum Subrectangle

    http://codeforces.com/contest/1060/problem/C 题意: a.b数组长度分别为n.m.矩阵C,Cij=ai*bj.在C中找到一个子矩阵,该子矩阵所有元素和不大于 ...

  4. webpack的详细介绍和使用

    // 一个常见的`webpack`配置文件 const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-we ...

  5. CAD控件,CAD插件使用教程:Android开发使用控件--开发环境的搭建

    Android开发使用控件入门--环境搭建 2014-12-24 09:57     14人阅读     评论(0)     收藏         编辑     删除 CAD控件.CAD三维控件,手机 ...

  6. Domain Adaptation论文笔记

    领域自适应问题一般有两个域,一个是源域,一个是目标域,领域自适应可利用来自源域的带标签的数据(源域中有大量带标签的数据)来帮助学习目标域中的网络参数(目标域中很少甚至没有带标签的数据).领域自适应如今 ...

  7. python嵌套列表

    从excel读取一行信息添加到一个临时列表,最后将所有行的列表添加到一个大列表. 源码: import xlrd,reclass Info(): def read_info(self): data = ...

  8. HDU - 2612 Find a way(BFS搜索)

    题目: 链接 思路: 用BFS分别以‘Y’和‘M’的位置为起点进行两次搜索,并把这两次的搜索结果在一个二维数组中保存下来,在对地图遍历遇到‘@’更行最小值. PS: 如果用‘Y’和‘M’点分别去搜每个 ...

  9. [0] Hello World

    受不了CSDN了,广告多,慢,编辑器难用,还限制博客数量.

  10. <Redis> 入门一 概念安装

    Redis 概念 redis是一款高性能的NOSQL系列的非关系型数据库          什么是NOSQL             NoSQL(NoSQL = Not Only SQL),意即“不仅 ...