本文主要是介绍Element UI table超出文本部分显示省略号，鼠标悬浮显示全部内容，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1、先看下效果图：
当鼠标放置在第二行地址上时，会显示地址信息的全部内容。
2、本网页是vue项目，依赖啥的就不说了，直接上table.vue详尽代码
<template><div><el-button @click="resetDateFilter">清除日期过滤器</el-button><el-button @click="clearFilter">清除所有过滤器</el-button><el-tableref="filterTable":data="tableData"@cell-mouse-enter="showBox"@cell-mouse-leave='hideBox'stripestyle="width: 100%"><el-table-columnprop="date"label="日期"sortablewidth="180"column-key="date":filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]":filter-method="filterHandler"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址":formatter="formatter"><!-- 利用了作用域插槽，自定义了“地址”这一列 --><template slot-scope="scope"><el-popover popper-class="area_popper" offset=-150 trigger="hover" :open-delay=0 :close-delay=0 placement="top" :disabled='isShowBox'><!-- 提示的文字框，显示所有的部门信息 --><p class="showText">{{ scope.row.address }}</p><!-- 利用三元表达式判断是否超过预期的长度 --><div slot="reference">{{ scope.row.address.length > 20? scope.row.address.slice(0, 20) + '...' : scope.row.address}}</div></el-popover></template></el-table-column><el-table-columnprop="tag"label="标签"width="100":filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]":filter-method="filterTag"filter-placement="bottom-end"><template slot-scope="scope"><el-tag:type="scope.row.tag === '家' ? 'primary' : 'success'"disable-transitions>{{scope.row.tag}}</el-tag></template></el-table-column></el-table></div>
</template>
<script>
import tooltipDialog from "../../../components/tooltipDialog/index";
export default {data() {return {isShowBox:false,tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',tag: '家'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄,天灵灵，地灵灵，菩萨不灵我最灵，我最灵啊我最灵,天上地下独一份啊，错过今天，后悔终生啊，买不了吃亏，买不了上当，抓紧时间，错过此刻，抱憾终生',tag: '公司'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄',tag: '家'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄',tag: '公司'}],}},mounted() {},methods: {resetDateFilter() {this.$refs.filterTable.clearFilter('date');},clearFilter() {this.$refs.filterTable.clearFilter();},formatter(row, column) {return row.address;},filterTag(value, row) {return row.tag === value;},filterHandler(value, row, column) {const property = column['property'];return row[property] === value;},// 鼠标经过显示盒子showBox(row, column, cell, e) {console.log("cell : "+JSON.stringify(cell.cellIndex)+" length "+JSON.stringify(e.target.innerText.length))if(cell.cellIndex === 2 && e.target.innerText.length >= 20){this.isShowBox = false}else{this.isShowBox = true}},// 鼠标离开隐藏盒子hideBox(row, column, cell, e){this.isShowBox = true}},watch: {},created() {}}</script><style scoped>h2{text-align: center;
/* padding: 30px;font-size: 18px;font-family: '宋体'; */}#chart_example{width: 50%;height: 500px;border: 1px solid #ff0000;margin: 0 auto;}.dpop{position:absolute;z-index:3;border:1px dashed #EEF;background:#EEE;}.myNote{display:-webkit-box;text-overflow:ellipsis;overflow:hidden;-webkit-line-clamp: 2;-webkit-box-orient:vertical;}</style>
路漫漫其修远兮，吾将上下而求索，希望此篇文章对大家有参考意义......
这篇关于Element UI table超出文本部分显示省略号，鼠标悬浮显示全部内容的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
