1.首先说下正常使用情况
这个时候使用是没问题的,而且当超过长度时,会自动显示省略号
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip>
</el-table-column>
2.有时我们想把省略号显示在中间,或者自己格式化字符串,这时候问题就来了,你会发现tooltip提示出来的信息也是带省略号的。
vue代码如下
<!--使用element自带的格式化数据写法-->
<el-table-column
prop="sex"
label="性别"
:formatter="formateData"
show-overflow-tooltip>
</el-table-column>
<!--使用自定义的过滤数据写法-->
<el-table-column
prop="sex"
label="性别"
show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.sex | filterData}}</template>
</el-table-column>
js代码随意
filters: {
filterData: function (value) {
return row.sex === 1 ? '男' : row.sex === 0 ? '女' : '未知'
}
},
methods: {
//而且需要注意,当对数据进行格式化的,必须有返回值,不然会显示空白
formateData(row, column, cellValue, index){
return row.sex === 1 ? '男' : row.sex === 0 ? '女' : '未知'
}
}
针对这时候的解决方法可以使用el-popover
<el-table-column
prop="name"
label="伙伴名称">
<template slot-scope="scope">
<div v-if="scope.row.name">
<el-popover
v-if="scope.row.name.length > 7"
placement="top"
trigger="hover"
>
<span>{{scope.row.name}}</span>
<span slot="reference" style="curosr:pointer">{{scope.row.name.slice(0,7)+"..."}}</span>
</el-popover>
<div v-else>{{scope.row.name}}</div>
</div>
<div v-else>--</div>
</template>
</el-table-column>
3.使用原生的table,显示悬浮的展示代码如下
<td width="170" class="overClass" title="我就是展示用的">我是页面实际内容</td>
.overClass{
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
width: 170px;
}
评论 (0)