iview 在 Table 组件中,文字过长用省略号代替,鼠标放上去 Tooltip 文字提示
这里我首先介绍iview 在 Table 组件中的 Render 写法。通过给columns数据的项,设置一个函数render,可以自定义渲染当前列,包括渲染自定义组件,它基于 Vue 的 Render 函数。render函数传入两个参数,第一个是 h,第二个是对象,包含row、column和index,分别指当前单元格数据,当前列数据,当前是第几行。下面通过添加 di...
·
这里我首先介绍 iview 在 Table 组件中的 Render 写法。
通过给 columns
数据的项,设置一个函数 render
,可以自定义渲染当前列,包括渲染自定义组件,它基于 Vue 的 Render 函数。
render
函数传入两个参数,第一个是 h,第二个是对象,包含 row
、column
和 index
,分别指当前单元格数据,当前列数据,当前是第几行。
下面通过添加 div 标签,设置 div 标签宽度以及 CSS 样式实现。
{
title: 'Address',
key: 'address',
width: 100,
render: (h, params) => {
return h('Tooltip', {
props: { placement: 'top-start' },
}, [
h('div', {
style: {
width: '100px',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
}
}, params.row.address),
h('span', {
slot: 'content',
style: {
whiteSpace: 'normal',
wordBreak: 'break-all'
}
},params.row.address)
])
}
}
我们也可以通过截取字符串来限制表格中文字显示的长度。
{
title: 'Address',
key: 'address',
width: 100,
render: (h, params) => {
return h('Tooltip', {
props: { placement: 'top-start' },
}, [
this.maxSlice(params.row.address),
h('span', {
slot: 'content',
style: {
whiteSpace: 'normal',
wordBreak: 'break-all'
}
},params.row.address)
])
}
}
maxSlice函数(截取字符串)
maxSlice (v) {
if (v) {
return v.length > 20 ? v.slice(0, 20) + "..." : v
}
},
更多推荐
已为社区贡献60条内容
所有评论(0)