对于element-plus里面的el-table表头进行el-tooltip提示,以及表头不换行,我这边接触的业务对于表格表头是进行数组渲染的,前两个是固定的,后面的el-tooltip是通过插槽放入的
<el-table border height=calc(100%) width="100px" :data="tableData1" :header-cell-style="{padding: '0'}" :row-style="{height: '20px'}" :cell-style="{padding: '0'}">
<el-table-column label="日期" min-width="100" show-overflow-tooltip prop="date" align="center"> </el-table-column>
<el-table-column label="总计" min-width="100" show-overflow-tooltip prop="总计" align="center"> </el-table-column>
<el-table-column v-for="(item) in tableHead" :label="item" min-width="100" show-overflow-tooltip :prop="item" align="center">
<template #header>
<el-tooltip effect="dark" :content="item" placement="top">
<span>{{item}}</span>
</el-tooltip>
</template>
</el-table-column>
</el-table>
特别注意template里面的#header,表示仅仅表头显示、 :content是tooltip里面的内容、span里面的是表头数据,这里得注意
设置表头不换行的话,可在css样式上进行
// 表头固定
/deep/ .el-table th.el-table__cell > .cell {
white-space: pre;
// white-space: pre-wrap; // 也行。
}