1.html

<el-table-column prop="taxes" :render-header="renderHeader" width="180">
<template slot-scope="scope">{{scope.row.taxes}}</template>
</el-table-column>

2.js

    renderHeader(h, { column, $index }) {
// console.log(column, $index)
// console.log(this.addedValueTaxRate, this.additionalTaxRate)
let addedValueTaxRate = this.addedValueTaxRate //
let additionalTaxRate = this.additionalTaxRate // 0.8
return [
'税费',
h(
'el-tooltip',
{
props: {
content: (function() {
return `含增值说${addedValueTaxRate}%,附加税${additionalTaxRate}%`
})(),
placement: 'top'
}
},
[
h('span', {
class: {
'el-icon-question': true
}
})
]
)
]
}

3.亲测有效,在代码中正在使用

4.效果图

elementui 自定义表头 renderHeader的写法 给增加el-tooltip的提示的更多相关文章

  1. element-ui自定义table表头,修改列标题样式

    elementUI table表格一般的样式是这样的: 但是要改变表头是比较麻烦的一个事情,但是往往有些项目是需要的比如改成如下样式: 一般直接改起来挺麻烦,好在官网提供了一个方法:render-he ...

  2. ElementUI的Table-column_render-header自定义表头

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

  3. ElementUI - Table 表头排序

    ElementUI - Table 表头自带排序功能,和排序事件,但是目前只是对当前界面的数据进行排序. 项目需求: 点击表头排序的时候,对所有数据进行排序. 初步方案: 在点击排序按钮的时,在排序事 ...

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

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

  5. ElementUI2.0组件库el-table表格组件如何自定义表头?

    效果图: npm run dev 编译项目之后,报错,要使用jsx语法需要先安装编译插件 1.安装下列安装包 npm install babel-plugin-syntax-jsx --save-de ...

  6. element之table自定义表头

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

  7. Android自定义View 画弧形,文字,并增加动画效果

    一个简单的Android自定义View的demo,画弧形,文字,开启一个多线程更新ui界面,在子线程更新ui是不允许的,但是View提供了方法,让我们来了解下吧. 1.封装一个抽象的View类   B ...

  8. Android中利用ViewHolder优化自定义Adapter的典型写法

    利用ViewHolder优化自定义Adapter的典型写法 最近写Adapter写得多了,慢慢就熟悉了. 用ViewHolder,主要是进行一些性能优化,减少一些不必要的重复操作.(WXD同学教我的. ...

  9. QTableWidget自定义表头QHeaderView加全选复选框

    1         QTableWidget自定义表头QHeaderView加全选复选框 在使用QTableWidget时需要在表头添加全选复选框,但是默认的表头无法添加复选框,只能用图片画上去一个复 ...

随机推荐

  1. 201871020225-牟星源《面向对象程序设计(java)》第十二周学习总结

    201871020225-牟星源<面向对象程序设计(java)>第十二周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...

  2. JWT(Json Web Token):一种在Web应用中安全传递信息的规范 转载

    文本将介绍一种在Web应用中安全传递信息的方式,称为JWT. 本文内容是对JWT官网介绍说明的英文翻译而来,由于本文英文水平有限,如有错误,还请指出,谢谢. What is JSON Web Toke ...

  3. 【Web】URL解析

    Request = { QueryString: function (item) { var svalue = location.search.match(new RegExp("[\?\& ...

  4. Netty的常用API(二)

    在使用Netty之前先介绍下Netty的常用API,对其有一个大概的了解. 一.EventLoop和EventLoopGroup EventLoop如同它的名字,它是一个无限循环(Loop),在循环中 ...

  5. VIJOS-P1201 高低位交换

    洛谷 P1100 高低位交换 https://www.luogu.org/problemnew/show/P1100 JDOJ 1349: VIJOS-P1201 高低位交换 https://neoo ...

  6. Spring Cloud微服务安全实战_3-7_API安全之授权

    API安全之授权 访问控制: 1,ACL :Access Control Lists,直接给每个用户授权,他能访问什么.开发简单,但是用户多的话,给每个用户授权比较麻烦. 2,RBAC:Role Ba ...

  7. postgres 字符操作补位,字符切割

    补位: ,'); -- 字符切割 并取值: )

  8. [LeetCode] 891. Sum of Subsequence Widths 子序列宽度之和

    Given an array of integers A, consider all non-empty subsequences of A. For any sequence S, let the  ...

  9. NetCore 开发时中文编码转换出现异常

    在C#编程的时候难免会遇到需要转换编码的场合. 在Framwork中可以用System.Text.Encoding解决,但是到了core会发现,虽然也有这个东西,但几个关键的中文编码(比如GB2312 ...

  10. 推荐一款移动端日历App吉日历

    推荐一款移动端日历App吉日历 一 应用描述 万年历.日历.农历.黄历.假期安排.天气预报.记事提醒便捷查看,一目了然! 二 功能介绍: 1.万年历:精美的日期展示,完整的节日日历随意查看,节假日.休 ...