IVIEW对的table组件超出长度用省略号代替，使用气泡提示。

最新推荐文章于 2024-09-07 00:32:03 发布

arly98196

最新推荐文章于 2024-09-07 00:32:03 发布

阅读量1k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/MisterHe/p/10089213.html

版权

render: (h, params) => {

　　return h('div', [

　　　　h('Tooltip', {

　　　　props: { placement: 'top' }

　　　　}, [

　　　　h('span', {

　　　　　　style: {

　　　　　　　　display: 'inline-block',

　　　　　　　　width: params.column._width*0.9+'px',

　　　　　　　　overflow: 'hidden',

　　　　　　　　textOverflow: 'ellipsis',

　　　　　　　　whiteSpace: 'nowrap',

　　　　　　}, params.row),

　　　　　　h('span', {

　　　　　　　　slot: 'content',

　　　　　　　　style: { whiteSpace: 'normal', wordBreak: 'break-all' }

　　　　　　},params.row)

　　　　])

}

2、为了render的复用性所以封装了，item是等钱显示的内容

//资金明细表IView-》Table-》render
export function render(itemColumnCode){
return (h,params)=>{
if(params.row[itemColumnCode]){
let numberAndEnglish = String(params.row[itemColumnCode]).replace(/[^0-9][a-z][A-Z]+/g,''); //正则获取字符串包含数组和大小写英文字母的内容
let ChineseLength = String(params.row[itemColumnCode]).replace(/[^\u4e00-\u9fa5]+/g,'');//正则获取字符串包含汉字的内容
let paramsRowItemColumnCode = numberAndEnglish.length*8 +ChineseLength.length*12;
let paramsRowItemColumnContent = params.row[itemColumnCode];
if(params.row[itemColumnCode].indexOf(" ") !== -1){//如果内容存在空格

//使用正则吧空格替换为span包裹的&nbsp（因为多个空格浏览器只显示一个空格）
paramsRowItemColumnContent=params.row[itemColumnCode].replace(/\s/g,'<span> </span>');
}
if((params.column._width*0.9<paramsRowItemColumnCode)){
return h('div',[
h('Tooltip',{
props:{placement:'bottom'},
transfer:true
},[
h('span',{
style:{//如果内容超出span标签的具体宽度，超出部分显示省略号
display:'inline-block',
width:params.column._width*0.9+'px',
overflow:'hidden',
textOverflow:'ellipsis',
whiteSpace:'nowrap',
},
domProps:{//向iview的dom的Props设置innerHTML用来渲染标签，iview的新版本只能渲染字符串
innerHTML:paramsRowItemColumnContent
}
}),
h('span',{
slot:'content',
style:{whiteSpace:'normal',wordBreak:'break-all'},
domProps:{
innerHTML:paramsRowItemColumnContent
}
},)
])
])
}else{
return h('div',[
h('span',{
domProps:{
innerHTML:paramsRowItemColumnContent
}
})
])
}
}
}
}