我想實現(xiàn)的效果如下圖：
微信截圖_20191029171825.png
找了一下element的說明文檔,里面有個屬性render-header
image.png
我看網(wǎng)上都是寫原生的createElement,非常的不方便,我們用另外一種方法
先安裝相關(guān)的插件：
npm i babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx --s
之后在.babelrc文件里面加入
"plugins": ["transform-vue-jsx", "transform-runtime"]
然后就可以使用jsx的語句了
<el-table-column header-align="center" align="center" label="推送開關(guān)狀態(tài)" :render-header="handleHelp">
然后在methods中定義方法
handleHelp(){
return(
<el-tooltip class="item" effect="dark" placement="top" content="若已開啟推送，關(guān)閉后門店溃槐、戶型和房間數(shù)據(jù)將不再同步。該開關(guān)無法手動調(diào)整蝗羊，詳情請聯(lián)系BU科技中心。">
<div>推送開關(guān)狀態(tài) <i class="el-icon-question"></i></div>
</el-tooltip>
)
}
下面的css按需引入即可
.el-table th div.tooltip {
display: block;
position: unset;
font-size: unset;
opacity: unset;
}
.el-table th div.el-tooltip {
display: block;
line-height: unset;
}
.el-tooltip__popper {
max-width: 250px;
}
