vue+elementui项目，table表格内容不超过两行默认不处理，超过两行以“...”显示，并且鼠标滑过可查看全部内容
效果如下：
image.png
image.png
实现代码：
<template>
<div>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址" width="250">
<template slot-scope="scope">
<el-popover
placement="top"
width="200"
trigger="hover"
:content="scope.row.address"
>
<div class="ellipsis" slot="reference">
{{ scope.row.address }}
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column prop="floor" label="楼层"> </el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address:
"中华人民共和国上海市普陀区金沙江路188号 中华人民共和国上海市普陀区金沙江路188号",
floor: "碧海花苑6栋606房",
},
{
date: "2016-05-02",
name: "王小虎",
address:
"中华人民共和国上海市普陀区金沙江路188号 中华人民共和国上海市普陀区金沙江路188号",
floor: "碧海花苑6栋606房",
},
],
};
},
created() {},
};
</script>
<style>
.ellipsis {
overflow: hidden;
display: -webkit-box;
word-break: break-all;
text-overflow: ellipsis;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/*! autoprefixer: on */
-webkit-line-clamp: 2;
}
</style>
