ElementUI中el-table表格组件如何自定义表头
问题概述
鼠标移动到el-table表格组件的表头显示提示信息，也算是自定义表头的一种吧。
效果图：（宝宝不会做动图，宝宝心里苦！！！）
1. ElementUI2.0组件库el-table表格组件常规用法
先贴上ElementUI2.0组件库的官网地址：http://element-cn.eleme.io/#/zh-CN ，百度搜索“element”第一个就是啦。
平常使用el-table表格组件是这样的：
1. 给表格传参，tableData是一个数组。
tableData = [
{date: '2018-01-01',tradeCount: 200, tradeSum: 100},
{date: '2018-01-01', tradeCount: 200,tradeSum: 100}
]2. 在<el-table-column>中用prop属性来对应对象中的键名即可填入数据。
3. 用label属性来定义表格的列名。可以使用width属性来定义列宽。
4. 表格组件中默认文本居左显示。align=”right”属性可设置文本向右显示，当然还有 left、 center 等属性值。
5. 若想在单元格中自定义，要用<template>标签包裹起来，slot-scope属性传参，scope.row取值。
6. 添加事件。
7. 表格还有很多丰富的参数，根据项目需求选择合适的参数吧！
有了对于el-table的基本了解之后，下面开始正式介绍如何在el-table表格组件中自定义表头！！！
2. render-header属性了解一下
我们不能直接在prop属性直接传递一个组件或者html元素。正确的做法是：Table组件提供了render-header属性，可以好好利用一番。
这是官网对render-header属性的描述
3. 解决办法--JSX语法
1. 在<el-table-column>中传入render-header属性
<el-table-column align="right" :render-header="renderHeader">
<template slot-scope="scope">{{scope.row.collected}}</template>
</el-table-column>2. 在methods自定义renderHeader方法，return (<div></div>)是JSX语法，详见官网 https://cn.vuejs.org/v2/guide/render-function.html#JSX
renderHeader(h, { column, $index }){
return (
<div>
<span>实收总金额(元) </span>
<el-tooltip class="item" effect="dark" content="实收总金额 = 收款总金额 - 退款总金额" placement="bottom">
<i class="el-icon-warning table-msg"></i>
</el-tooltip>
</div>
)
}3. npm run dev 编译项目之后，报错，要使用jsx语法需要先安装编译插件
4. 安装JSX语法编译工具
npm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-props\ babel-preset-es2015\ --save-dev
5. 配置.babelrc文件
{
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}4. 解决办法--渲染函数
可直接使用渲染函数，不使用JSX语法，就不需要安装额外的编译插件啦
renderHeader(h, data) {
return h("div", [
h("span", ['实收总金额(元) ']),
h("el-tooltip", {
attrs: {
class: "item",
effect: "dark",
content: "实收总金额 = 收款总金额 - 退款总金额",
placement: "bottom"
}
}, [
h("i", {
'class': 'el-icon-warning table-msg'
})
])
])
}h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的，如果在作用域中 h 失去作用， 在应用中会触发报错
问题汇总：
1. 博主根据实际项目情况，编写了这篇博文。存在一个坑????
看到这个小小的i标签没有，就是它。有同学直接拷贝代码之后，因为没有对这个i 标签设置样式。也就没有鼠标上移显示tooltip的效果了。因为将上文我们的tooltip组件翻译成HTML代码是这样的：（我们把鼠标放到i标签上才能显示tooltip哦）
<div>
<span>实收总金额(元) </span>
<el-tooltip class="item" effect="dark" content="实收总金额 = 收款总金额 - 退款总金额" placement="bottom">
<i class="el-icon-warning table-msg"></i>
</el-tooltip>
</div>2. 渲染函数的语法规则详见 https://cn.vuejs.org/v2/guide/render-function.html，自己多写几遍就能明白啦！
对于如何在自定义表头添加事件，可以查看《createElement参数——深入data对象》
到此这篇关于ElementUI中el-table表格组件如何自定义表头的文章就介绍到这了,更多相关el-table自定义表头内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
React和Vue都使用虚拟DOM和diff算法来更新DOM,但它们在实现上有所不同,React采用基于索引的比较,Vue采用双端比较算法,React在比较时不复用不同类型的节点,而Vue会优先复用两端相同的节点,React对key的依赖较高,而Vue在没有key时也能通过双端比较优化2025-03-03
这篇文章主要介绍了关于移动端与大屏幕自适应适配方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家详细介绍了vue组件封装实现抽奖随机数，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要给大家介绍了Vue实现订单支付倒计时功能,倒计时这要运用在创建订单后15分钟内进行支付,否则订单取消,本文结合示例代码给大家详细讲解,需要的朋友可以参考下2023-08-08
由于 Vue 会在初始化实例时进行双向数据绑定，使用Object.defineProperty()对属性遍历添加 getter/setter 方法，所以属性必须在 data 对象上存在时才能进行上述过程 ，这样才能让它是响应的，这篇文章主要介绍了Vue中$set()的使用方法场景分析,需要的朋友可以参考下2023-02-02
elementUI中el-dropdown的command实现传递多个参数
这篇文章主要介绍了elementUI中el-dropdown的command实现传递多个参数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
在前端开发中，如果需要模拟后端数据，而又不想开发一个后端服务器， 则可以借助mock.js配置一个后端服务器来返回前端需要的数据，本文将会分别介绍在Quasar项目和Vite项目中Mock服务器的配置方法2022-12-12
本文主要介绍了在Vs-code/WebStorm中构建Vue项目，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
如何利用vue展示.docx文件、excel文件和csv文件内容
最近遇到了一些新的需求,需要前端实现文件预览功能,下面这篇文章主要给大家介绍了关于如何利用vue展示.docx文件、excel文件和csv文件内容的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了Vue 和 Django 实现 Token 身份验证 ,Vue.js 和 Django 编写的前后端项目中，实现了基于 Token 的身份验证机制，其他前后端框架的 Token 实现原理与本文一致，需要的朋友可以参考下2022-08-08
最新评论