代码

<template>  <el-table :data="tableData">  <el-table-column>  <template slot="header" slot-scope="scope">  <el-tooltip content="这是列的提示信息" placement="top">  <span>列标题</span>  </el-tooltip>  </template>  <template slot-scope="scope">  <!-- 列内容 -->  {{ scope.row.someProperty }}  </template>  </el-table-column>  <!-- 其他列 -->  </el-table>  
</template>  <script>  
export default {  data() {  return {  tableData: [  // ... 数据  ]  };  }  
};  
</script>

使用原因：el-table中标题内容过长，设置隐藏，并鼠标悬停可以显示内容

用到知识点：html中的title和css的样式

关键代码：

css设置 

/deep/ .el-table th.el-table__cell > .cell {border: 1px solid red;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: inline-block;
}

html

 <el-table-columnprop="product":label="$t('projectMgr.table.product')"align="center"><template slot="header" slot-scope="scope"><el-tooltip:content="$t('projectMgr.table.product')"placement="top"><span>{{ $t('projectMgr.table.product') }}</span></el-tooltip></template><template slot-scope="scope"><el-tagv-if="scope.row.isProductFamilyManagementEnabled === 1"type="success">{{ $t('projectMgr.duoPro') }}</el-tag><el-tag v-else>{{ $t('projectMgr.danPro') }}</el-tag></template></el-table-column>