iview表格表头上添加icon图标

需求描述： 如图，在表格表头处添加icon图标，并且鼠标悬浮时有提示语。

解决方案： 使用iview表格中自带的 renderHeader 函数，其用法和 render 类似，

代码：

<template><div> <Table :columns="tableColumn" :data="tableData" class="honorTable"><template slot-scope="{ row }" slot="openOrClose"><i-switch v-model="row.openOrClose" @on-change="changeSwitch" size="large"><span slot="open">启用</span><span slot="close">停用</span></i-switch></template><template slot-scope="{ row }" slot="action"><div class="lineBtn"><Button type="text" class="linkhoverStyle ivu-btn ivu-btn-text" @click="editRow(row)">修改</Button><Button type="text" class="linkhoverStyle ivu-btn ivu-btn-text" @click="deleteRow">删除</Button></div></template></Table></div>
</template>

data() {return {tableColumn: [{title: '对象',key: 'object'},{title: '奖项',key: 'awards'},{title: '周期',key: 'period'},{title: '标识',key: 'mark',render: (h, params) => {return h('div', params.row.mark.map(item => {return h('Tag', {props: {color: 'error'}}, this.handleMark(item))}))}},{slot: 'openOrClose',renderHeader: (h, params) => {return h('Tooltip', {props: { placement: 'top-end' }}, [h('span', [h('span', '启用/停用'),h('i', {class: 'iconfont iconwenhao-xiangsu',style: {fontSize: '14px',marginLeft: '5px',marginRight: '14px',}})]),h('span', {slot: 'content'}, '停用后信息将不再显示在前端页面')])}},{title: '操作',slot: 'action',align: 'center'},]}
}

iview表格表头上添加icon图标相关推荐

el-table表格某列添加icon图标
el-table表格某列添加icon图标和可编辑输入框 <el-tablekey="one"style="border-collapse: collapse;min ...
qt修改程序图标名称_解决Qt应用程序添加icon图标，修改窗口图标以及添加系统托盘问题...
一.Qt应用程序添加icon图标的方法: 首先,我们需要先准备两个文件,一个是icon图标,另一个是rc文件,我分别命名为"myApp.rc"和"soft.ico&quo ...
如何快速的给你的项目添加icon图标
如何快速的给你的项目添加icon图标下载软件如何制作图片将制作的图标拖到项目当中设置启动页注意: 如果手动添加了启动页的话,记得将Launch Screen中的东西清除掉
获取网站的浏览器上的icon图标
获取网站的浏览器上的icon图标 http://www.im286.com/favicon.ico 把前面的域名换成你要获取的网站
layui 给table里面的添加图标_layui怎么添加icon图标？
layui怎么添加icon图标?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. layui 的所有图标全部采用字体形式,取材于阿里巴巴矢量图标库(icon ...
echarts柱状图上增加icon图标
echarts柱状图上增加icon图标效果图基于echarts5.3.2版本以下是option中的内容 getData(){let datas={ws:{jz:25,sz:30},fq:{jz: ...
Tableau可视化技巧-在数据上添加方向图标的两种方法
在日常数据分析中,数据的上下波动是我们经常遇到的,比如指标的上升与下降.用一个方向图标,比如 ⬆️ 或者⬇️来表明这种变化有时候比数字更加容易辨别. 本文我们看一下如何在数据上添加方向图标. 如下图 ...
cocos2dx win32版本添加icon图标
1. 在视图资源project.rc文件中添加icon图标 2. 在main.cpp文件的_tWinMain函数里添加如下代码 #if (CC_TARGET_PLATFORM == CC_PLATFO ...
给 element-ui 表格的表头添加icon图标
el-table icon图标的设置,使用 slot="header" 插槽,然后直接通过设置类名为 el-icon-iconName 来使用即可. <el-table-co ...

iview表格表头上添加icon图标

iview表格表头上添加icon图标相关推荐

最新文章

热门文章