首页 > 其他 > 详细

elementui table表格点击当前行显示背景色

时间:2021-05-12 20:55:49      阅读:50      评论:0      收藏:0      [点我收藏+]

技术分享图片

 

 技术分享图片

 

 技术分享图片

 

 技术分享图片

 

 

<el-table
      ref="rzTable"
      class="rz-table-content"
      :data="tableData.data"
      style="width: 100%; text-align: left"
      :header-cell-style="headerStyle"
      @selection-change="handleSelectionChange"
      @row-click="rowClick"
      :row-class-name="tableRowClassName"
      :row-style="selectedHighlight"
    >
methods: {
    //当某一行被点击时会触发该事件
    rowClick(row) {
      this.getIndex = row.index;
      this.$emit("rowClick", row);
    },
    tableRowClassName({ row, rowIndex }) {
      //把每一行的索引放进row
      row.index = rowIndex;
    },
    selectedHighlight({ row, rowIndex }) {
      if (this.getIndex === rowIndex) {
        return {
          "background-color": "#CAE1FF",
        };
      }
    },
.rz-table >>> .el-table__row:hover > td {
  background-color: transparent;
}

 

elementui table表格点击当前行显示背景色

原文:https://www.cnblogs.com/web-aqin/p/14760767.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!