记录一次VUE+elementUI，表格的表头增加图标，鼠标悬浮后出现文字，文字支持自定义格式和换行

废话不多说直接上代码：

这是需要需要操作的<el-table-column>

　　<el-table-column width="110" prop="budgetAmount" align="left" :render-header="renderHeader" label="当年预算金额" show-overflow-tooltip>

接下来对是函数 renderHeader ：

renderHeader (h, { column, $index }) {
　　return h('div', [
　　　　h('span', column.label + ' ', { align: 'center' }),
　　　　h('el-popover',
　　　　　　{
　　　　　　　　props: {
　　　　　　　　　　placement: 'top-start',
　　　　　　　　　　trigger: 'hover'
　　　　　　　　}
　　　　　　},
　　　　　　[
　　　　　　　　h('div', { style: { margin: '10px' }}, ['● 新建资本性项目预算金额由各部门在预算编制时确认；', h('br'),
　　　　　　　　'● 待执行项目即截至上一年年末未完成合同签订的资本性项目，待执行项目的预算金额默认为是项目的申请采购金额，若各部门预算编制时报送了其他金额，则按其他金额计；', h('br'),
　　　　　　　　'● 待支付项目即截至上一年年末未完成合同签订的资本性项目，待支付项目的预算金额为各部门在预算编制上报的当年计划支付金额。'],
　　　　　　　　),
　　　　　　　　h('i', {
　　　　　　　　　　class: 'el-icon-warning',
　　　　　　　　　　slot: 'reference'
　　　　　　　　　})
　　　　　　]
　　　　)
　　])
},

 

 

觉得有用的点个赞吧！一起学习，谢谢