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. linux (01) linux基础

    一.了解linux 都有哪些职位 机房运维 负责服务器的上下架 桌面运维 专业修电脑 修打印机 系统管理员 负责liunux操作系统的维护 运维开发  linux +  python  把平时自己手敲 ...

  2. 虚拟机安装后配置IP地址

    BOOTPROTO=static   #启动的方式,dhcp表示自动获取,static表示静态ONBOOT=yes   #是否开机启动,yes表示开机启动IPADDR  #设置IP,和vmware在同 ...

  3. LG5338/BZOJ5509/LOJ3105 「TJOI2019」甲苯先生的滚榜 Treap

    问题描述 LG5338 LOJ3105 BZOJ5509 题解 建立一棵\(\mathrm{Treap}\),把原来的\(val\)换成两个值\(ac,tim\) 原来的比较\(val_a<va ...

  4. luoguP2260 [清华集训2012]模积和

    题意 \(\sum\limits_{i=1}^{n}\sum\limits_{j=1}^{m}n\%i*m\%j*[i!=j]\) \(\sum\limits_{i=1}^{n}\sum\limits ...

  5. [LeetCode] 103. Binary Tree Zigzag Level Order Traversal 二叉树的之字形层序遍历

    Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from left to ...

  6. python3中用django下载文件,中文名乱码怎么办?

    前段时间被某个前端小可爱鄙视了一下,说我博客都一年不更新了,我不服,明明还有俩月才到一年呢.不过说是这么说,还是要更新一下的. 以上都是借口,下面开始正文.     我公司的某个内部系统,用djang ...

  7. pymongo方法详解

    1.连接mongodb ######### 方法一 ########## import pymongo # MongoClient()返回一个mongodb的连接对象client client = p ...

  8. 去掉DataGridView最后一行的空白行,删除空白行

    //不显示出dataGridView1的最后一行空白   dataGridView1.AllowUserToAddRows = false;       直接在LODE事件

  9. 手把手教你 通过 NuGet.Server 包 搭建nuget服务器,并使用桌面工具上传 nuget 包,免命令行

    新建web项目 工具:VS2013 版本:.Net Framework 4.6,低版本也行,不过要找到对应版本的Nuget.Server 装了NuGet客户端(百度如何安装) WebForm或MVC都 ...

  10. Unsafe例子

    Java和C++语言的一个重要区别就是Java中我们无法直接操作一块内存区域,不能像C++中那样可以自己申请内存和释放内存.Java中的Unsafe类为我们提供了类似C++手动管理内存的能力,不建议使 ...