element-ui的table表格勾选高亮当前行（亲测有效，拿过来直接用）

最新推荐文章于 2024-09-05 19:02:14 发布

Kimser

最新推荐文章于 2024-09-05 19:02:14 发布

阅读量1.2k

点赞数 2

本文链接：https://blog.csdn.net/Kimser/article/details/107956497

版权

效果如图：

html：

      <el-table
        class="box"
        :data="tableData"
        :height="height"
        tooltip-effect="dark"
        :row-style="selectedHighlight"
        @selection-change="handDrawer"
      >

methods：

    selectedHighlight ({ row, rowIndex }) {
      if (this.selectRow.includes(rowIndex)) {
        return {
          'background-color': '#15499A'
        }
      }
    },
    // 获取勾中表单
    handDrawer (val) {
      this.buttonList = val
    },

watch：

  watch: {
    buttonList (data) {
      this.selectRow = []
      if (data.length > 0) {
        data.forEach((item, index) => {
          this.selectRow.push(this.tableData.indexOf(item))
        })
      }
    }
  },

亲测有效！