本文主要是介绍Vue+ElementUI实现表头添加小提示(icon图标),当鼠标滑动至此位置时显示提示信息,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
效果图:
实现步骤:
el-table-column
中添加属性
:render-header=“renderHeader”
<!-- 操作 -->
<el-table-columnlabel="操作"fixed="right"align="center"header-align = "center"style="overflow-x: hidden;"width="250px":render-header="renderHeader"
>
methods:{// 小提示renderHeader(h,{column}){const serviceContent= [h('div',{slot:"content",},"小提示:拖拽稿件所在行可进行排序")]return h("div",[h("span",column.label),h("el-tooltip",{props:{placement:"top"}},[serviceContent,h("i",{class:"el-icon-warning-outline",style:"color:orange;margin-left:5px;"})])]);},
}
这篇关于Vue+ElementUI实现表头添加小提示(icon图标),当鼠标滑动至此位置时显示提示信息的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!