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下面是為了方便調用。