描述:
iView组件设置Table表格某一列数据超出显示省略号、并用 Tooltip 组件显示完整内容。若现在对某个属性进行二次加工操作,有两种展示方式:1)通过在<Table>标签内部加入<template>标签进行数据的绑定及加工;2)通过在columns中加入render函数对数据进行二次加工
【http://v4.iviewui.com/components/table】
问题:
对数据进行二次加工后,tooltip显示完整内容作用失效。
解决:
(二次加工示例:接口未返回的数据进行‘暂无’设置,以iView组件Table基础表格为例)
<template>
<Table :columns="columns1" :data="data1">
<template slot-scope="{ row }" slot="address">
<Tooltip :content="row.address || '暂无'" placement="top">
<div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
<span>{{ row.address || '暂无' }}</span>
</div>
</Tooltip>
</template>
</Table>
</template>
<script>
export default {
data () {
return {
columns1: [
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
slot: 'address',
ellipsis: true,
tooltip: true//在template下失效,可省略
}
],
data1: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park',
date: '2016-10-01'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
date: '2016-10-02'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
date: '2016-10-04'
}
]
}
}
}
</script>
无论是render函数还是template方式对数据进行二次加工,都与tooltip提示冲突,我是使用了iView组件里面的Tooltip单独再写一次提示效果
结果:
1)超出用...显示
2)鼠标放置显示提示语
前端小白积累经验篇~~