IVIEW對的table組件超出長度用省略號代替，使用氣泡提示。

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>&nbsp;</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
}
})
])
}
}
}
}