iview組件的Table表格的內(nèi)容過多時,顯示title提示

在iview的Table表格中,如果數(shù)據(jù)超出當前列的寬度,多余的部分會折行顯示,使得該行的高度增加。為了實現(xiàn)*

文本將不換行,超出部分顯示為省略號

的效果,iview提供了表頭屬性ellipsis。然而這個屬性卻有一個弊端,就是顯示為省略號的部分對用戶來說是不可見的,非常影響體驗,而且在iview文檔中,作者并未給出任何解決辦法。
最簡單的解決辦法是給相關數(shù)據(jù)增加title屬性,使得鼠標移入時可以顯示全部信息。在SegmentFault上找到了相關代碼

要在column中的--表格列的配置--描述添加
注意area的值,后面也要相應對應是area的值,否則找不到data中的area的值,就會報錯。

 {
                    title: '地域',
                    key: 'area',
                    width: 100,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('span', {
                                style: {
                                    display: 'inline-block',
                                    width: '100%',
                                    overflow: 'hidden',
                                    textOverflow: 'ellipsis',
                                    whiteSpace: 'nowrap'
                                },
                                domProps: {
                                    title: params.row.area
                                }
                            }, params.row.area)
                        ])
                    }
                }
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容