ElementUI的Table表格,官方网站上提供了很多样式,但是在日常开发中还会碰到各种情况,显然官方提供的是不能满足需求的。那么,我们就根据自己的需求对table进行改造。

先丢出关于Table的官方文档的传送门,请戳这里→ http://element-cn.eleme.io/#/zh-CN/component/table

官方对Table相关的Attributes介绍的不是很详细,对于不太熟悉人,很难搞明白,实际操作起来很难受。

下面就关于Table-columnrender-header的运用,稍作说明,具体请移步此项目文件中查看(文章最下面有传送门)。

参数 说明 类型 可选值 默认值
render-header 列标题 Label 区域渲染使用的 Function Function(h, { column, $index })

一、自定义表头样式

renderHeaderOne (h, { column, $index }) {
return h('span', [
h('span', column.label),
h('span', {
class: 'errorIcon',
on: {
click: () => {
console.log(`${column.label} ${$index}`)
}
}
})
])
}

二、自定义表头样式和整列的拖动

renderHeader (h, { column, $index }) {
// 这里可以根据$index的值来对自身需求进行修改,
return h('span', {
'class': ['thead-cell'],
on: {
mousedown: ($event) => { this.handleMouseDown($event, column) },
mouseup: ($event) => { this.handleMouseUp($event, column) },
mousemove: ($event) => { this.handleMouseMove($event, column) }
}
}, [
h('span', [
h('span',
{
class: $index === 0 ? 'el-icon-star-off' : $index === 1 ? 'el-icon-time' : $index === 2 ? 'el-icon-location' : '',
style: {
// marginLeft: ''
},
on: {
}
}),
h('span', column.label)
]),
h('span', {
'class': ['virtual']
})
])
}

DEMO传送门,请戳这里→ https://github.com/Darkerxi/ElementUI-Table-column_render-header

ElementUI的Table-column_render-header自定义表头的更多相关文章

  1. element-ui的table表格控件表头与内容列不对齐问题

    原文链接:点我 element-ui的table表格控件表头与内容列不对齐问题 解决方法:将以下样式代码添加到index.html.或app.vue中(必须是入口文件,起全局作用!)body .el- ...

  2. element-ui的table动态生成表头和数据,且表中数据可编辑

    1.实现表头的动态渲染 2.表头label和prop字段都要定义 3.去判断显示那个数据表 4.实现双击的时候在可编辑 // 双击修改 弹出input tableDbEdit(row, column, ...

  3. element之table自定义表头

    1.实现效果 2.使用render-header可以自定义表头 <el-table-column prop="date" label="日期" sorta ...

  4. elementUI 表格 table 的表头错乱问题

    页面中多组件开发时,如果页面中有表格的,table表格头出现表头错乱 // 全局设置1 body .el-table th.gutter{ 2 display: table-cell!importan ...

  5. 在 Element-UI 的 Table 组件上添加列拖拽效果

    Element-UI 的 Table组件很强大,但是我们的需求更强大... 简单粗暴的来一发效果图: 一.数据驱动 传统的拖动效果,都是基于通过 mousedown.mousemove.mouseup ...

  6. element-ui 实现table整列的拖动

    演示地址 1. 先动态渲染表头,给每一个表头添加一个class=virtual 的画虚线的类名,同时给每个表头加上鼠标点击.拖动.抬起事件:mousedown->mousemove->mo ...

  7. gridview自定义表头

    gridview为我们提供了丰富的接口,用于满足自定义需求. 通常asp:gridview会根据绑定的列Columns自动生成表头,展现在前台元素. 序号 类别 有时候需要复杂一些的表头. 序号 类别 ...

  8. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  9. vue如何循环渲染element-ui中table内容

    对于大多数前端开发者来说,vuejs+element-ui是开发后台管理系统过程中必不可少的技术框架.而后台管理系统中,最常见的形式就是表格和表单,以便用来增删改查. element-ui中table ...

随机推荐

  1. javascript获取一个字符串的长度(包含中文)

    /* getStrLen(str):获取一个字符串的长度(包含中文) */ function getStrLen(str){ let len = 0, i, c; for (i = 0; i < ...

  2. numpy 介绍与使用

    一.介绍 中文文档:https://www.numpy.org.cn/ NumPy是Python语言的一个扩展包.支持多维数组与矩阵运算,此外也针对数组运算提供大量的数学函数库.NumPy提供了与Ma ...

  3. firewall-cmd命令

    firewalld 基本操作 安装firewalld # yum install firewalld firewall-config firewalld启动,停止,开机启动与否,查看状态 # syst ...

  4. [Python]JavaScript VS Python 函数

    js function 相当于 python def js语句结束符; python为缩进符 JavaScript /*定义*/ function 函数名(参数1,参数2,参数3...){ 函数体 } ...

  5. 多线程共享变量和 AsyncLocal

    >>返回<C# 并发编程> 1. 简介 2. 异步下的共享变量 3. 解析 AsyncLocal 3.1. IAsyncLocalValueMap 的实现 3.2. 结论 1. ...

  6. VSTO开发指南(VB2013版) 第二章 Office解决方案介绍

    实例2.1 通过控制台实现对Excel的自动化处理 书本第32页 注:添加两个引用: 第一个:程序集—框架—“System.Windows.Forms 4.0.0.0”第二个:程序集—扩展—“Micr ...

  7. redis 5.0.7 源码阅读——双向链表

    redis中双向链表相关的文件为:adlist.h与adlist.c 一.数据结构 redis里定义的双向链表,与普通双向链表大致相同 单个节点: typedef struct listNode { ...

  8. CDQ分治笔记+例题

    CDQ分治是一种离线分治算法,它基于时间顺序对操作序列进行分治. 看这样一个问题: 在一个三维坐标系中,有若干个点,每个点都有对应的坐标 \((X_i , Y_i , Z_i)\) ,我们要对于每个点 ...

  9. 使用CSV Data Set Config配置原件,参数化数据

    对接口数据的参数化方式大概有三种方式,1:jmeter内置函数:2:借助CSV Data Set Config配置原件:3:jdbc连接数据库,使用数据表字段 此处主要讲第二种:借助CSV Data ...

  10. 声明式服务调用:Spring Cloud Feign

    最近在学习Spring Cloud的知识,现将声明式服务调用:Spring Cloud Feign 的相关知识笔记整理如下.[采用 oneNote格式排版]