<template><div><el-table :data="tableData" style="width: 100%" @cell-mouse-enter="handleMouseEnter" @cell-mouse-leave="handleMouseLeave"><el-table-column prop="ddd" label="日期2" width="150" /><el-table-column prop="ddd" label="日期2" width="200"><template slot-scope="{row}">{{row.ddd}}<div class="dpop" title="弹框" v-if="row.showFullName">{{row.ddd}}</div></template></el-table-column></el-table></div>
</template><script>
export default {data () {return {tableData: [{id: 1,ddd: '11111111111111111111111111111111111111111111111111',showFullName: false}]}},methods: {handleMouseEnter (row, event, column) {console.log(event)if (event.id == 'el-table_1_column_3') {// 滑入行时触发this.tableData.forEach(ele => {if (ele.id == row.id) {ele.showFullName = true}})}},handleMouseLeave (row, event, column) {// 滑出行时触发if (event.id == 'el-table_1_column_3') {// 滑入行时触发this.tableData.forEach(ele => {if (ele.id == row.id) {ele.showFullName = false}})}}}
}
</script><style lang="less" >
.el-table {position: relative;margin-top: 100px;
}
.dpop {min-width: 600px;position: absolute;bottom: 0;left: 50%;z-index: 3;border: 1px solid black;
}
</style>
