问题:我们需要在表头添加一个tooltip,如图所示

找了一下element的说明文档,里面有个属性render-header

我看网上都是写原生的createElement,非常的不方便,我们用另外一种方法

打开命令行输入

 npm i babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx --s

之后在你的.babelrc文件里面修改

"plugins": ["transform-runtime", "transform-vue-jsx"]

然后就可以使用jsx的语句了

<el-table-column class-name="status-col" label="加密等级" width="150" align="center" :render-header="handleHelp">

handleHelp(h,{column}){
        return(
        <el-tooltip class="tooltip" 
        effect="light" 
        placement="top">
        <ul slot="content">
          <li>加密：我方公司发给此公司的文件，此公司如果再次发给第三方，那么第三方将无法打开此文件。且不能够保存DXF、格柏等第三方文件，不能双文档拷贝。</li>
          <li>普通：我方公司发给此公司的文件，此公司如果再次发给第三方，那么第三方可以打开此文件。且能够保存DXF、格柏等第三方文件，能双文档拷贝。</li>
        </ul>
         <div>加密等级
          <i class="icon-question"></i>
         </div>
        </el-tooltip>
        )
      }

以上