近期公司业务需要,将表格内部的某字段内容两行显示,如果超出两行需要…来显示,在这里,公司用到的ui框架是iview,所以就此将table组件简单的修改一下,其中遇见的几个问题,在此记录一下
1、如何使超过2行显示点点点
misc.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: {
wh