近期用Vue+iview开发的后台项目,表格用的较多,需要对表格中内容超出部分显示…,并提示ToolTip显示全部内容,下面是封装了两个函数,方便在项目中的多次调用。
tool.js文件
// 表格中内容超出后 显示... 鼠标移入并tip提示
/**
* @param {*} h
* @param {*} lines 最多显示多少行,超出后显示...
* @param {*} content 显示的内容
* @returns tip
* @example {
key: "vtmName",
title: "标题",
align: "center",
render: (h,params) => {
return toolTip(h, 2, params.row.vtmName)
}
}
*/
export const toolTip = (h, lines, content) => {
return h('Tooltip', {
props: {
placement: 'bottom-start',
transfer: true
}
}, [
h('span', {
style: {
textOverflow: 'ellipsis',
whiteSpace: 'normal',
overflow: 'hidden',
display: '-webkit-box',
webkitBoxOrient: 'vertical',
webkitLineClamp: lines + ''
}
}, content),
h('span', {
slot: 'content',
style: {
whiteSpace: 'normal',
wordBreak: 'break-all'
}
}, content)
])
}
// 带超链接点击
/**
* @param {*} h
* @param {*} lines 最多显示多少行,超出后显示...
* @param {*} content 显示的内容
* @param {*} url url链接地址
* @returns tip
* @example {
key: "vtmName",
title: "标题",
align: "center",
render: (h,params) => {
return toolTipLink(h, 2, params.row.vtmName)
}
}
*/
export const toolTipLink = (h, lines, content, url) => {
return h('Tooltip', {
props: {
placement: 'bottom-start',
transfer: true,
content: content
}
}, [
h("a", {
domProps: {
href: url
},
style: {
textOverflow: 'ellipsis',
whiteSpace: 'normal',
overflow: 'hidden',
display: '-webkit-box',
webkitBoxOrient: 'vertical',
webkitLineClamp: lines + ''
}
}, content)
])
}
vue中的使用
import { toolTip , toolTipLink } from 'tool的path'
// 使用
columns: [
{
key: "vtmName"
title: "标题",
align: "center",
render: (h,params) => {
//我这里是超出2行后显示... , 并提示tip
return toolTip(h, 2,params.row.vtmName)
// 带超链接点击的
//return toolTipLink(h,2,params.row.vtmName, 'https://www.baidu.com跳转的url')
}
},
]