<template>
<div class="tabeldata">
<el-table :data="tableData" ref="table" 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="地址"> </el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄',
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄',
},
],
};
},
mounted() {
const tbody = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody');
const rows = tbody.querySelectorAll('tr');
rows.forEach((row) => {
row.addEventListener('mouseenter', this.handleMouseEnter);
row.addEventListener('mouseleave', this.handleMouseLeave);
});
},
beforeDestroy() {
const tbody = this.$refs.table.$el.querySelector('.el-table__body-wrapper tbody');
const rows = tbody.querySelectorAll('tr');
rows.forEach((row) => {
row.removeEventListener('mouseenter', this.handleMouseEnter);
row.removeEventListener('mouseleave', this.handleMouseLeave);
});
},
methods: {
handleMouseEnter(event) {
event.target.style.color = 'red';
event.target.style.background = '#000';
},
handleMouseLeave(event) {
event.target.style.color = '';
event.target.style.background = '';
},
},
};
</script>
element 鼠标滑过table表格 字体变色 背景色变颜色实现
最新推荐文章于 2024-07-10 08:57:15 发布