element-ui中table表格中，表头文本隐藏

在element-ui中，table表格中，表头内容进行文本隐藏

利用el-table-column中的属性：render-header，可具体查看element-ui文档；

<el-table-column
	:render-header="renderHeader" label="文本文本文本文本文本文本文本文本文本文本文本文本文本">
</el-table-column>

<script>
    export default {
         methods:{
             renderHeader(h,{column,$index}){
                 "div",
                     {
                     slot:"content",
                     class:"table-header-flex",
                     style:{
                         width:"100%"
                     }
                 },
                     [
                     h(
                     "el-tooltip",   // 利用el-toolpic对隐藏文本进行提示
                     {
                         props:{
                             placement:"top"
                         }
                     },
                     [
                         h(
                         "div",
                         {
                             slot:"content",
                             style:{
                                 whiteSpace:"normal"
                             }
                         },
                         column.label
                         ),
                         h(
                         "span",
                         {
                             style:{  // 文本隐藏样式
                                 whiteSpace:"normal",
                                 overflow:"hidden",
                                 "text-overflow":"ellipsis",
                                 "white-space":"nowrap",
                                 "max-width":"100%",
                                 display:"inline-block"
                             }
                         },
                         column.label)
                     ])
                 ]
             },
         }
}
</script>

在项目中推荐进行全局封装函数！