描述点：
1、使用el-table展示表格数据。
2、表格操作列事件：鼠标移入移出事件，点击事件。
3、重点：要求某一操作项实现鼠标移入移出展示说明文本。
4、使用同库中的el-popover，节点多，问题定位难，样式更改复杂。
5、el-button绑定mouseenter，mouseleave事件无效。
6、记录项
使用唯一弹层切换显示文本
<template>
<div class="table-popup">
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
fixed
prop="date"
label="日期"
width="100">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="80">
</el-table-column>
<el-table-column
prop="province"
label="省份"
width="80">
</el-table-column>
<el-table-column
prop="city"
label="市区"
width="80">
</el-table-column>
<el-table-column
prop="address"
label="地址"
width="140"
:show-overflow-tooltip="true">
</el-table-column>
<el-table-column
prop="zip"
label="邮编"
width="80">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="350"
>
<template slot-scope="scope" >
<span @mouseenter="(e) => handleClick(scope.row,e)" @mouseleave="closePopup" class="span-btn">行内元素</span>
<el-button type="text" size="small"><span @mouseenter="(e) => handleClick(scope.row,e)" @mouseleave="popupMouse(false)">按钮的行内元素</span> </el-button>
<button @mouseenter="(e) => handleClick(scope.row,e)" @mouseleave="closePopup">普通按钮</button>
<el-button @click="(e) => handleClick(scope.row,e)" type="text" size="small">按钮点击</el-button>
<el-button @mouseenter="(e) => handleClick(scope.row,e)" @mouseleave="closePopup" type="text" size="small">按钮鼠标事件</el-button>
</template>
// 使用同库中的el-popover
<!-- <template>
<el-popover
placement="left"
width="150"
trigger="hover"
:popper-class="'popover-box'">
<div class="content-box">
今天天气不错，阳光明媚哦！
</div>
<el-button type="primary" slot="reference">查看</el-button>
</el-popover>
</template> -->
</el-table-column>
</el-table>
<div class="pover" v-show="pt" :style="popupPosition" @mouseenter="popupMouse(true)" @mouseleave="popupMouse(false)">
<p class="text">{{ timer }}你好呀，欢迎━(*｀∀´*)ノ亻! 你好呀，欢迎━(*｀∀´*)ノ亻! 你好呀，欢迎━(*｀∀´*)ノ亻! 你好呀，欢迎━(*｀∀´*)ノ亻!</p>
<div class="foot-btn">
<el-button size="mini" @click="closePopup">确定</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
handleClick(row, e) {
e.stopPropagation()
e.preventDefault()
this.timer = row.date;
this.pt = true
// 定位根据具体情况设置
this.pp.top = (e.pageY -30 ) + 'px'
this.pp.left = (e.pageX - 230) + 'px'
},
closePopup() {
this.pt = false
this.timer = null
this.pp = {
position: 'absolute',
top: null,
left: null,
zIndex: 999
}
},
popupMouse(flag) {
this.pt = flag;
}
},
data() {
return {
timer: '',
pt: false,
pp: {
position: 'absolute',
top: null,
left: null,
zIndex: 999
},
tableData: [{
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1517 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1519 弄',
zip: 200333
}, {
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1516 弄',
zip: 200333
}]
}
},
watch: {
pp: {
handler(n,o){},
deep: true
}
},
computed: {
popupPosition() {
return this.pp
}
}
}
</script>
<style scoped>
.pover{
width: 300px;
min-height: 100px;
border: 1px solid #dddddd;
background-color: #ffffff;
border-radius: 4px;
box-sizing: border-box;
}
.pover::after{
position: absolute;
top: 20%;
left: 99%;
content: '\25BA';
font-size: 12px;
color: #dddddd;
}
.text {
padding: 10px;
line-height: 20px;
text-align: left;
word-break: break-all;
box-sizing: border-box;
}
.foot-btn{
width: 100%;
text-align: right;
padding: 10px;
box-sizing: border-box;
}
.span-btn{
display: inline-block;
cursor: pointer;
}
</style>
记录项
show-overflow-tooltip:true // 当show-overflow-tooltip设置为true时，单元格中的数据超出单元格宽度，展示部分文本+省略号，且有完整文本提示说明。
表格的行与单元格事件：
方法名 方法描述 返参
cell-mouse-enter 当单元格 hover 进入时会触发该事件 row, column, cell, event
cell-mouse-leave 当单元格 hover 退出时会触发该事件 row, column, cell, event
cell-click 当某个单元格被点击时会触发该事件 row, column, cell, event
cell-dblclick 当某个单元格被双击击时会触发该事件 row, column, cell, event
row-click 当某一行被点击时会触发该事件 row, column, event
row-contextmenu 当某一行被鼠标右键点击时会触发该事件 row, column, event
row-dblclick 当某一行被双击时会触发该事件 row, column, event
header-click 当某一列的表头被点击时会触发该事件 column, event
header-contextmenu 当某一列的表头被鼠标右键点击时触发该事件 column, event
