element的el-table列标题添加自定义图标

大家好，我是小佑@小佐https://blog.csdn.net/Smell_rookie，是一名页面仔工程师，我会不定时在CSDN更新我的博客，有兴趣的可以点个关注来逛逛我的主页。

需求：开发中我们会遇到在el-table的列标题那添加操作图标，如下图：

实现：其实el-table有提供一个render-header方法，但是没有提供具体的案例，今天遇到了就做个小总结。

<el-table-column label="操作" fixed="right" width="100" :render-header="renderHeader">/*methods*/
renderHeader(h, { column }) {return h("span", {}, [h("span", {}, column.label),this.userType == '3' && h( /*这里边可以根据自己的业务来控制自定图标显示与否 不需要的话直接去掉 this.userType == '3' && 就好了*/"el-popover",{props: {effect: "dark",placement: "top-start",/*可以配置提示出现的位置*/trigger: "hover",/*可以配置触发方式*/content: "拖动商品可以自由排序"}},[h("i",{slot: "reference",class: "el-icon-warning"/*elementui的图标*/},"")])]);},

这里实现的效果是鼠标移入出现上面的提示：

这里的触发方式可以参考el-popover组件

案例中可以配置触发方式和提示出现的位置：

觉得有帮助的可以关注一下博主

element的el-table列标题添加自定义图标相关推荐

elementui表格中tip设置_Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用...
{column}) { return h( 'div',// 添加选中事件select (data) { console.log(data);}... 效果如下: 3.在表头添加一个Tooltip 我 ...
Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
Dynamics CRM 向视图列添加自定义图标和提示信息
本篇介绍如何向视图中的某列添加自定义图标和提示信息,先来看下最终的效果,联系人的性别系列显示了(这里男女性别图标反了,就懒得重新截图了),鼠标放到图标会有提示信息(这里图截不出来). 那要怎么实现上述 ...
1.怎样定制VC#DataGrid列标题？
1.怎样定制VC#DataGrid列标题? DataGridTableStyle dgts = new DataGridTableStyle(); dgts.MappingName = "m ...
antd的Table列选择、列拓展
antd的Table列选择.列拓展列选择:rowSelection属性 //选择的项目存放在数组中 const [selectedRow, setSelectedRow] = useState< ...
vue动态设置table列的显示与隐藏并且可以随意拖地排序(element-ui或Antd-ui )
最终效果如下页面只需要设置两个参数(适用于element及antd) columnSetting // 是否显示列设置按钮 // name="TtableColumnSet" / ...
Element 中的表格表头添加搜索图标和功能
Element 中的表格表头添加搜索图标和功能主要实现 table的slot='header' headerData是表头的循环数组 tableData是表格内容的数组 <template s ...
列标题如何删除gridcontrol_DEV控件GridControl常用属性设置（转）
1. 如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 2. 如何新增一条记录 (1).gridView.Ad ...
oracle列设置标题,oracle实现某一列的值转换为列标题
步骤一:创建测试表 CREATE TABLE EMP ( EMPNO NUMBER(4), ENAME VARCHAR2(10), JOB VARCHAR2(9), MGR NUMBER(4), HI ...

element的el-table列标题添加自定义图标

element的el-table列标题添加自定义图标相关推荐

最新文章

热门文章