element table表头文本溢出 省略号隐藏

 <el-table :data="data_list" style="width: 100%; font-size: 14px;" border>
   <template v-for="(item,index) in tableCol">
     <el-table-column
        :key="index"
         :prop="item.prop"
         :label="item.label"
         :min-width="item.minWidth"
         :show-overflow-tooltip="true"
      >
       <template slot-scope="scope" slot="header">
         <div @onMouseOver="onMouseOver('refName' + scope.$index)">
           <el-tooltip :disabled="isShowTooltip" :content="item.label" placement="top">
              <div class="title">
                 <span :ref="'refName' + scope.$index">{{item.label}}</span>
              </div>
           </el-tooltip>
         </div>
       </template>
      </el-table-column>
   </template>
 </el-table>


 onMouseOver(refName) {
   let parentWidth = this.$refs[refName][0].parentNode.offsetWidth;
   let contentWidth = this.$refs[refName][0].offsetWidth;
   // 判断是否开启tooltip功能
   if (contentWidth > parentWidth) {
     this.isShowTooltip = false;
   } else {
     this.isShowTooltip = true;
   }
 },

//style
.title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }