elementui 自定义表头 renderHeader的写法 给增加el-tooltip的提示
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的提示的更多相关文章
- element-ui自定义table表头,修改列标题样式
elementUI table表格一般的样式是这样的: 但是要改变表头是比较麻烦的一个事情,但是往往有些项目是需要的比如改成如下样式: 一般直接改起来挺麻烦,好在官网提供了一个方法:render-he ...
- ElementUI的Table-column_render-header自定义表头
ElementUI的Table表格,官方网站上提供了很多样式,但是在日常开发中还会碰到各种情况,显然官方提供的是不能满足需求的.那么,我们就根据自己的需求对table进行改造. 先丢出关于Table的 ...
- ElementUI - Table 表头排序
ElementUI - Table 表头自带排序功能,和排序事件,但是目前只是对当前界面的数据进行排序. 项目需求: 点击表头排序的时候,对所有数据进行排序. 初步方案: 在点击排序按钮的时,在排序事 ...
- vue + element ui 表格自定义表头,提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- ElementUI2.0组件库el-table表格组件如何自定义表头?
效果图: npm run dev 编译项目之后,报错,要使用jsx语法需要先安装编译插件 1.安装下列安装包 npm install babel-plugin-syntax-jsx --save-de ...
- element之table自定义表头
1.实现效果 2.使用render-header可以自定义表头 <el-table-column prop="date" label="日期" sorta ...
- Android自定义View 画弧形,文字,并增加动画效果
一个简单的Android自定义View的demo,画弧形,文字,开启一个多线程更新ui界面,在子线程更新ui是不允许的,但是View提供了方法,让我们来了解下吧. 1.封装一个抽象的View类 B ...
- Android中利用ViewHolder优化自定义Adapter的典型写法
利用ViewHolder优化自定义Adapter的典型写法 最近写Adapter写得多了,慢慢就熟悉了. 用ViewHolder,主要是进行一些性能优化,减少一些不必要的重复操作.(WXD同学教我的. ...
- QTableWidget自定义表头QHeaderView加全选复选框
1 QTableWidget自定义表头QHeaderView加全选复选框 在使用QTableWidget时需要在表头添加全选复选框,但是默认的表头无法添加复选框,只能用图片画上去一个复 ...
随机推荐
- luogu P1904 天际线
分析 都知道是从左向右扫描 可是该维护什么,扫描什么? 注意想想怎么输出, 实际上它要的输出就是图形的轮廓,即每个突出块的左上节点的x,y 所以说, 我们可以把扫描线扫进的楼房放入线段树,扫出的楼房删 ...
- opencv鼠标事件
#include <opencv2\opencv.hpp> using namespace cv; struct mouse_para { cv::Mat org; cv::Mat img ...
- 使用opencv320演示window平台cmake的使用方法以及一个使用CNN识别字符的例子 20180408
cmake是干啥的: 本来是Linux平台的一个编译工具. window平台上,cmake可以生成一个可以用vs(可以指定)打开的工程,然后使用 vs 编译相关的 lib.dll 或者 exe以供使用 ...
- python27期day06:小数据池、深浅拷贝、集合、作业题。
0.pycharm是代码块.黑窗口是小数据池.如下图: 1.驻留机制(长得像的共用一个内存地址)分小数据池缓存机制:后期开发时能明确知道.为什么不能正常使用.把经常用的东西放入规则(黑窗口)里. 数字 ...
- plantUML 安装
plantUML 安装 资源 http://www.graphviz.org/ https://graphviz.gitlab.io/_pages/Download/windows/graphviz- ...
- vijos2054 SDOI2019 热闹的聚会与尴尬的聚会
题目链接 思路 首先观察题目最后的式子\(\lfloor \frac{n}{p + 1} \rfloor \le q\) 并且\(\lfloor \frac{n}{q+1} \rfloor \le p ...
- [LeetCode] 545. Boundary of Binary Tree 二叉树的边界
Given a binary tree, return the values of its boundary in anti-clockwise direction starting from roo ...
- JDK8过渡到JDK11
module-info 首先最大的难度就是module-info.java Java9 手把手教你实现模块化 后续我再找点详细的资料 中文API文档 其次是中文文档[感谢 译者wzjin https: ...
- java 获取用户输入
import java.util.Scanner; public class Sample { public static void main(String[] args) { int num; Sc ...
- asp.net mvc移除X-AspNet-Version、X-AspNetMvc-Version、Server
asp.net mvc程序部署到IIS,,返回的HTTP头中包含Server, X-Powered-By, 和 X-AspNet-Version.X-AspNet-Version信息. 这些信息有时给 ...