element 自定义表头 和 表头文字弹框提示

效果图：

**

第一种实现方式：element 提供的 “render-header” 方法

**

例子：

// An highlighted block
<el-table>
	<el-table-column sortable
	          min-width="110"
	                 :render-header="(h, { column, $index }) => renderHeader(h, { column, $index },'xx价：xxx价')"
	                 label="xx价">
	  <template slot-scope="scope">
	    <p>¥{{scope.row.xx}}</p>
	  </template>
	</el-table-column>
</el-table>

renderHeader (h, { column, $index }, obj) {
      // console.log(h, { column, $index }, obj);
      
      return h("span", [
        h("span", column.label + "  ", {
          align: "left",
        }),
        h(
          "el-popover",
          {
            props: {
              placement: "top",   
              // width: "200",
              trigger: "hover"
            }
          },
          [
            h("span", obj, {
              class: "text-align: right; margin: 0"
            }),
            h("i", {  
              class: "el-icon-info",
              // style: "color:red,margin:18px",
              slot: "reference"
            })
          ]
        )
      ]);
    }

第二种实现方式：在 template 中 设置 slot=“header”

例子：直接实现上面图片效果（推荐这种）

<el-table>
	<el-table-column sortable
             min-width="110">
       <template slot="header">
         <span>xxx价</span>
         <el-popover placement="top"
                     width="200"
                     trigger="hover"
                     content="xx价：xxxxxxx价">
           <i class="el-icon-info"
              slot="reference"></i>
         </el-popover>
       </template>
       <template slot-scope="scope">
         <p>¥{{scope.row.xx}}</p>
       </template>
     </el-table-column>
</el-table>