elementui的table列超出隱藏tooltip懸浮顯示問題
更新時間：2023年11月17日 10:24:13 作者：LLL_LH
這篇文章主要介紹了elementui的table列超出隱藏tooltip懸浮顯示問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
elementui的table列超出隱藏tooltip懸浮顯示
<el-table-column label="內(nèi)容" show-overflow-tooltip>
<template slot-scope="scope">
{{scope.row.desc}}
</template>
</el-table-column>當表格中的某些內(nèi)容過長會導致表格變形，所以可以只顯示一行，超出的部分隱藏，鼠標滑過時顯示所有內(nèi)容，
如上所示，添加show-overflow-tooltip屬性。
注意：
顯示的內(nèi)容只能包裹在行內(nèi)元素里，或者不添加，不能包裹在塊級元素里面
el-table文字超出隱藏；el-table表格文字一行展示，超出隱藏，多余的內(nèi)容會在 hover時顯示
el-table文字 默認情況下若內(nèi)容過多會折行顯示，若需要單行顯示可以給el-table-column使用show-overflow-tooltip屬性，
它接受一個Boolean，為true時多余的內(nèi)容會在 hover 時以 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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
基于express中路由規(guī)則及獲取請求參數(shù)的方法
下面小編就為大家分享一篇基于express中路由規(guī)則及獲取請求參數(shù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要給大家介紹了關于VUE配置history路由模式配置的相關資料,History模式是Vue路由的另一種模式,在History模式下URL中的路徑不再使用#符號,而是直接使用正常的路徑形式,需要的朋友可以參考下2023-12-12
在現(xiàn)代的前端開發(fā)中,二維碼生成是一個常見的需求,尤其是在需要快速分享信息等場景中,本文將詳細介紹如何在 Vue 2 項目中使用 qrcode 庫生成二維碼,感興趣的可以了解下2025-05-05
解決Element-ui radio單選框label布爾/數(shù)值的一個坑
這篇文章主要介紹了解決Element-ui radio單選框label布爾/數(shù)值的一個坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)評價星星功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了Vue開發(fā)實現(xiàn)吸頂效果的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
vue?demi支持sfc方式的vue2vue3通用庫開發(fā)詳解
這篇文章主要為大家介紹了vue?demi支持sfc方式的vue2vue3通用庫開發(fā)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
Vue3動態(tài)路由KeepAlive設計方案(附詳細代碼)
keep-alive是Vue內(nèi)置的一個組件,可以使被包含的組件保留狀態(tài),或避免重新渲染,這篇文章主要介紹了Vue3動態(tài)路由KeepAlive設計方案的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2026-03-03
這篇文章主要為大家介紹了vue3?vite異步組件及路由懶加載實戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要介紹了vue中的循環(huán)遍歷對象、數(shù)組和字符串，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08