element-plus表头设置el-tooltip,表头不换行

1,475 阅读1分钟

对于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; // 也行。
  }