vue2 element表格鼠标划入某一行字体和背景色变颜色

最新推荐文章于 2024-03-13 13:51:09 发布

Cookie王

最新推荐文章于 2024-03-13 13:51:09 发布

阅读量562

点赞数 7

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/weixin_73337633/article/details/135034699

版权

 <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>
 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>