elementUI table 选中行呈现不同样式

<el-table
:row-style="rowClass"
:data="tableData"
class="tab-290 scroll-common"
@selection-change="handleSelectionChange"
>

　　主要用到两个属性:row-style 渲染行样式和@selection-change表格选中时 进行的操作

    rowClass({ row, rowIndex }) {
      let arr = this.selIndex || []
      if (this.selIndex.includes(rowIndex)) {
        return this.$TAB_ROW_ACTIVE
      }
    },

　　

    handleSelectionChange(val) {
      let ids = val.map((item) => {
        return item.id
      })
      let arr =  []
      this.tableData.map((item, index) => {
        for (let i in ids) {
          if (item.id === ids[i]) {
            arr.push(index)
          }
        }
      })
      this.selIndex = arr
     },

　　在配个上全局样式

import Vue from 'vue'
const TAB_ROW_ACTIVE = {
  "border": "0px",
  "background": "#F3F9FF",
  "color": "#358BD9"
}
export default {
  install() {
    Vue.prototype.$TAB_ROW_ACTIVE = TAB_ROW_ACTIVE;
  }
}

　　这边这种配置方法是为了后期可以统一修改，所以单独弄出来的一个属性，可以根据自己感觉放在哪来，这边挂载在vue下面是为了方便调用。