網站首頁 編程語言 正文
iview這個庫用的很少,雖說很多ui庫都是一樣的,element-ui是使用template里的插槽 用的較熟悉一些,iview的是需要搭配render使用, 所以自己看了一下網上的,都不是我要的效果,就自己梳理了下
效果如下圖:
自己這邊也應用了兩行在換行 超出…顯示
data 你的表格數據中:
{
title: '申請描述',
key: 'name',
width: '300px',
render: (h, { row }) => {
return h('div', { class: 'textClass' }, [
h(
'Tooltip',
{
props: {
placement: 'top',
name: 'true',
content: row.name,
},
},
row.name
),
]);
},
},
css 兩行在換行顯示
.textClass {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
box-orient: vertical;
line-clamp: 2;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
max-height:42px
}
注意了!!!
后來又發現了個問題, 文字直接給溢出去了,提示文字只能根據你整列的寬度去顯示文字
所以又寫了第二種代碼 如下所示:
table中文字溢出隱藏,提示氣泡展示所有信息
{
title: '申請描述',
key: 'name',
width: '240px',
render: (h, params) => {
// 處理文字,溢出用點代替
let txt = params.row[params.column.key];
let name = null;
if (txt) {
if (txt.length > params.name) {
params.name = txt.substring(0, params.name) + '.....';
} else {
params.name = txt;
}
}
return h('div', { class: 'textClass' }, [
h(
'Tooltip',
{
props: {
placement: 'top',
content: params.name,
transfer: true,
},
},
[
params.name,
h(
'span',
{
slot: 'content',
style: { whiteSpace: 'normal', wordBreak: 'break-all' },
},
txt
),
]
),
]);
},
// render: (h, { row }) => {
// return h('div', { class: 'textClass' }, [
// h(
// 'Tooltip',
// {
// props: {
// placement: 'top',
// transfer: true,
// content: row.name,
// },
// },
// row.name
// ),
// ]);
// },
},
最終效果:
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Vwi2D3FK-1639107333643)(https://img-blog.csdnimg.n/3706abe1a0954e64913665067c9bc468.png)]
完美解決 之后遇到iview的踩坑會多多記錄的~
原文鏈接:https://blog.csdn.net/piaocanY/article/details/121851378
相關推薦
- 2022-11-29 C#泛型的使用案例_C#教程
- 2022-09-10 Python遞歸實現猴子吃桃問題及解析_python
- 2022-10-23 python?groupby函數實現分組選取最大值與最小值_python
- 2022-07-09 Python?如何查看程序內存占用情況_python
- 2021-12-06 Go語言實現一個簡單生產者消費者模型_Golang
- 2022-04-17 uniapp 實現無感刷新token, 適應大多數項目
- 2022-12-01 RFO?SIG之openEuler?AWS?AMI?制作詳解_云其它
- 2022-09-20 Android實現簡單實用的垂直進度條_Android
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區別,Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤:Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串(SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列,發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支