如何給element-ui table的表頭增加懸浮提示？

場景：要使表格中的表頭文字不換行，鼠標放上去就顯示表頭內容，就像那種tip提示。該怎么實現呢？恰好這兩個element都提供了，就讓我們一起來看看吧！

 

先來看看效果圖吧：

 

 

 

1、首先我們可以設置超出讓文本省略號顯示（根據需求而定），注意：要設給表格的.cell的div才生效哦！

.el-table th>.cell{
    white-space: nowrap; /* 文本在一行顯示，不換行 */
　　text-overflow: ellipsis; /* 顯示省略符號來代表被修剪的文本。*/
　　overflow: hidden; /* 超出部分隱藏 */
}

 

2、這里我們要使用自定義表頭，官網介紹點這里，在最后的 Scoped Slot 介紹就是。

　　

　　　　上代碼：

<el-table :data="tableData">
 　　　　　　<el-table-column align="center">
                <template slot="header" slot-scope="scope">
                    // ele的消息提示組件
                    <el-tooltip content="店鋪退款總額$" placement="top" effect="light">
                        <span>店鋪退款總額$</span>
                    </el-tooltip>
                </template>
                <template slot-scope="scope">
                    <span>{{scope.row.數據}}</span>
                </template>
            </el-table-column>
</el-table>    

　　　　解析： 1、第一個templete設置 slot="header"，就是表頭的內容；第二個templete沒有設置 就是表格行的內容；

　　　　　　　 2、el-tooltip 的content設置懸浮顯示的內容，span就是表頭內容，具體可參考官網介紹；

　 　　　　　　3、表格的數據、使用template的數據關聯，自行翻閱官網介紹，這里就不多描述了；

 

 

3、到此就設置完成了，就實現懸浮表頭顯示內容啦！