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

export function render(itemColumnCode,itemColumnlist,money){
    return (h,params)=>{
        let paramsRowItemColumnContent = params.row[itemColumnCode];
        if(!!itemColumnlist && itemColumnlist.length>0){
            itemColumnlist.map(function (value) {
                if (value.dicCode == params.row[itemColumnCode]) {
                    paramsRowItemColumnContent = value.dicNameZh;
                    // params.row[itemColumnCode] = value.dicCode;
                }
            });
        }
        if(money === 'money'){
            if (params.row[itemColumnCode] === 0) {
                paramsRowItemColumnContent = '0.00'
            } else {
                paramsRowItemColumnContent = numFormat((params.row[itemColumnCode] / 100).toFixed(2))
            }
        }
        if(String(paramsRowItemColumnContent).indexOf(" ") !== -1){
            paramsRowItemColumnContent=String(params.row[itemColumnCode]).replace(/\s/g,' ');
        }
        if(params.row[itemColumnCode] || paramsRowItemColumnContent){
            let numberAndEnglish = String(paramsRowItemColumnContent).replace(/[^0-9][a-z][A-Z]+/g,'');
            let ChineseLength = String(paramsRowItemColumnContent).replace(/[^\u4e00-\u9fa5]+/g,'');
            let paramsRowItemColumnCode = numberAndEnglish.length*7 +ChineseLength.length*12;
            if((params.column._width*0.95<paramsRowItemColumnCode)){
                return h('div',[
                    h('Tooltip',{
                        props:{placement:'bottom',transfer:true},
                        style:{
                            display:'inline-block',
                            width:'100%',
                            overflow:'hidden',
                            textOverflow:'ellipsis',
                            whiteSpace:'nowrap',
                            lineHeight: 30+'px',
                            height:30+'px',
                        },
                    },[
                        h('span',{
                            domProps:{
                                innerHTML:paramsRowItemColumnContent
                            }
                        }),
                        h('span',{
                            slot:'content',
                            style:{whiteSpace:'normal',wordBreak:'break-all'},
                            domProps:{
                                innerHTML:paramsRowItemColumnContent
                            }
                        },)
                    ])
                ])
            }else{
                return h('div',{
                    style:{
                        lineHeight: 30+'px',
                        height:30+'px',
                    }
                },[
                    h('span',{
                        domProps:{
                            innerHTML:paramsRowItemColumnContent
                        }
                    })
                ])
            }
        }
    }
}
function numFormat(data) {
    return data && (data.toString().indexOf('.') != -1 ? data.toString().replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
        return $1 + ',';
    }) : data.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'))
}

你可能感兴趣的:(javascript,vue,UI)