element Table el-tooltip

今天实现一个功能，要在table表格做一个el-tooltip

大概长这样

然后贴一下代码，做一个记录

<el-table :data="statisticsTable" border style="width: 100%" :default-sort="{order: 'descending'}" @sort-change="changeStatistics"><el-table-column fixed prop="storeName" label="门店名称" /><el-table-column fixed prop="storeAddress" label="门店省市区" /><el-table-column prop="dealerName" label="经销商" /><el-table-column prop="ticketNum" label="已核销优惠券（张）" sortable="custom" /><el-table-column prop="goodsNum" label="销售商品（件）" sortable="custom"/><el-table-column prop="ticketPrice" label="核销总金额（元）" sortable="custom" :render-header="renderPrice"/><el-table-column prop="goodsPrice" label="用券总成交额（元）" sortable="custom" :render-header="renderGoods"/><el-table-column prop="ratio" label="费效比" sortable="custom" :render-header="renderRatio"/>
</el-table>

在table列中设置属性:render-header=" "

// methods方法
renderPrice(h, { column, $index }) {return [column.label,h("el-tooltip",{props: {content: "核销总金额 = 已核销优惠券 x 优惠券面值",placement: "top"}},[h("span", { class: { "el-icon-question": true } })])]},

最后实现效果

element Table el-tooltip相关推荐

动态处理表格多行合并单元格、同时解决hover错乱问题 - Vue Element Table
简介: el-table单元格合并,处理hover错乱问题,自定义底部合计栏. 如图所示: 源码(复制另存txt,修改.html直接运行) <!DOCTYPE html> <html ...
element table固定表头，表的高度自适应解决方法
element table固定表头,表的高度自适应解决方法参考文章: (1)element table固定表头,表的高度自适应解决方法 (2)https://www.cnblogs.com/muou ...
Vue之element table 后端排序实现
Vue之element table 后端排序实现 1.如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段 ...
ANSYS——后处理中单元表（ELEMENT table）的作用、创建、使用
目录单元表的作用 1.访问无法绘制的数据 2.数据的数据源单元表的创建单元表项序号的查找单元表的一些常用操作单元表--行代表的是单元.列代表的是项目数据具体关于单元表的实例可以参考: &l ...
element table 组件内容换行方案
element table 组件内容换行方案 white-space的值: normal 默认.空白会被浏览器忽略. pre 空白会被浏览器保留.其行为方式类似 HTML 中的<pre> ...
element table批量删除_element ui 批量删除
//这里做一个事件 checkbox发生改变时触发修改删除 data{ return { multipleSelection: [] //返回的是选中的列的数组集合这里接收用户选中的id 默认放 ...
element table表格里的多选按钮，根据条件判断是否可以被选中
element table表格里的多选按钮,根据条件判断是否可以被选中 <el-table v-loading="loading" :data="contentLi ...
vue element table 相关页面跳转实例代码
vue element table 相关页面跳转实例代码 <el-table-column width="100px" align="center" la ...
element table filed显示不全
element table filed显示不全项目中使用element table filed没有横向滚动条的情况下出现filed列显示不全的情况解决方案 .el-table_fixed, .el ...
Vue + Element + Table 分页选择勾选和取消勾选的问题
Vue + Element + Table 分页选择勾选和取消勾选的问题问题描述: 需求是这样的===>表格前面每条数据都有复选框吧然后表格有很多页 , 我从第一页选取N条数据再去其他页 ...

element Table el-tooltip

element Table el-tooltip相关推荐

最新文章

热门文章