elementui的table列超出隱藏tooltip懸浮顯示問題
更新時(shí)間：2023年11月17日 10:24:13 作者：LLL_LH
這篇文章主要介紹了elementui的table列超出隱藏tooltip懸浮顯示問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
elementui的table列超出隱藏tooltip懸浮顯示
<el-table-column label="內(nèi)容" show-overflow-tooltip>
<template slot-scope="scope">
{{scope.row.desc}}
</template>
</el-table-column>當(dāng)表格中的某些內(nèi)容過長會(huì)導(dǎo)致表格變形，所以可以只顯示一行，超出的部分隱藏，鼠標(biāo)滑過時(shí)顯示所有內(nèi)容，
如上所示，添加show-overflow-tooltip屬性。
注意：
顯示的內(nèi)容只能包裹在行內(nèi)元素里，或者不添加，不能包裹在塊級(jí)元素里面
el-table文字超出隱藏；el-table表格文字一行展示，超出隱藏，多余的內(nèi)容會(huì)在 hover時(shí)顯示
el-table文字 默認(rèn)情況下若內(nèi)容過多會(huì)折行顯示，若需要單行顯示可以給el-table-column使用show-overflow-tooltip屬性，
它接受一個(gè)Boolean，為true時(shí)多余的內(nèi)容會(huì)在 hover 時(shí)以 tooltip 的形式顯示出來。
給el-table-column添加show-overflow-tooltip
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" show-overflow-tooltip label="地址">
</el-table-column>
</el-table>
</template><script>
export default {
data () {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路上海市普陀區(qū)金沙江路上海市普陀區(qū)金沙江路上海市普陀區(qū)金沙江路上海市普陀區(qū)金沙江路上海市普陀區(qū)金沙江路上海市普陀區(qū)金沙江路上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
}]
}
}
}
</script>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue Element UI 表單自定義校驗(yàn)規(guī)則及使用
這篇文章主要介紹了Vue Element UI 表單自定義效驗(yàn)規(guī)則及使用,文中通過代碼介紹了常見表單效驗(yàn)規(guī)則，代碼簡單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
本文主要介紹了Vue-Element-Admin前端接入SSO的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
Vue中ref、reactive、toRef、toRefs、$refs的基本用法總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue中ref、reactive、toRef、toRefs、$refs的基本用法,以及他們之家的區(qū)別,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
本篇文章主要介紹了vue2.0父子組件間通信的實(shí)現(xiàn)方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-04-04
通過Vue實(shí)現(xiàn)Excel文件的上傳和預(yù)覽功能
在業(yè)務(wù)系統(tǒng)中,Excel 文件作為一種常用的數(shù)據(jù)存儲(chǔ)和傳輸格式,經(jīng)常需要被處理和展示,這篇文章將講解如何通過 Vue 和 xlsx.js 實(shí)現(xiàn) Excel 文件的上傳和預(yù)覽功能,需要的朋友可以參考下2025-04-04
Vue.js分頁組件實(shí)現(xiàn)：diVuePagination的使用詳解
這篇文章主要介紹了Vue.js分頁組件實(shí)現(xiàn)：diVuePagination的使用詳解,需要的朋友可以參考下2018-01-01
Vue2中pinia刷新后數(shù)據(jù)丟失的問題解決
Pinia是一個(gè)Vue.js狀態(tài)管理庫，如果你在組件中修改了store中的數(shù)據(jù)并刷新了界面，Pinia會(huì)將store中的數(shù)據(jù)重置為初始值，從而導(dǎo)致數(shù)據(jù)丟失的問題，本文就來介紹一下問題解決，感興趣的可以了解一下2023-12-12
這篇文章主要為大家詳細(xì)介紹了vue輸入框組件開發(fā)過程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
解決Vue_localStorage本地存儲(chǔ)和本地取值問題
這篇文章主要介紹了解決Vue_localStorage本地存儲(chǔ)和本地取值問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要為大家介紹了Vue 2源碼解析Parse函數(shù)定義，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08