总结下el-table最近用的几个属性和方法：row-style、header-cell-style、去除高亮、去掉鼠标hover背景色...

由于工作需要展示各种表格，所以总结了最近用到的一些方法。

1、去掉鼠标hover时背景色style：

::v-deep .el-table tbody tr:hover>td {
  background-color:transparent!important;
}
// 如果td没有颜色，可以去掉，这里加上保险
::v-deep .el-table__body tr.hover-row>td {
  background-color: transparent !important;
}

2、修改表格高亮行背景颜色style：

// 点击当前行——高亮当前行
::v-deep .el-table__body tr.current-row>td.el-table__cell{
   background-color: #caf982 !important;
}

3、点击当前行内操作按钮，修改该行背景色style :

<el-table v-loading="loading" border :data="tkData.records" style="width: 100%"
        :header-cell-class-name="addClassname" :row-style="isSelect">
        <el-table-column v-for="(item, index) in columTitle" :label="item.title" :prop="item.prop" header-align="center"
          align="center" :width="item.width" :key="index">
        </el-table-column>
        <el-table-column label="操作" header-align="center" align="center" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="handleDabiao(scope.row,scope.$index,'打标补全' )"
              v-if="isDbDirector||isDbManager">打标补全</el-button>
            <el-button type="text" @click="handleDabiao(scope.row,scope.$index,'查看' )" v-else>查看</el-button>

          </template>
        </el-table-column>
</el-table>
export default{
    name:'',

    data(){
	    return{
		    selectedArrData:[]
	    }
    },
    methods:{
    handleDabiao(row,index,str){
	    let obj={data:row,index:index}
	    this.selectedArrData=[]
	    this.selectedArrData.push(obj)
    },
    // 操作表格变色
    isSelect({ row,rowIndex }) {
      const checkIdList = this.selectedArrData.map((item) => item);
      // console.log("表格变色list",checkIdList)
      // console.log("表格变色list",rowIndex)
      if(checkIdList.length>0){
        if (rowIndex==checkIdList[0].index) {
          return {
            backgroundColor: "#caf982",
            color: "fff",
          };
        }
      }
    },

    }
}

4、修改表格标题背景色-属性：header-cell-class-name

<el-table 
:header-cell-class-name="addClassname"
>
</el-table>
方法：
//第一行前四列一个颜色，后面几列一个颜色
addClassname({ row, rowIndex, column, columnIndex }) {
      if ((columnIndex == 0 || columnIndex == 1 || columnIndex == 2 || columnIndex == 3)&& rowIndex == 0) {
        return "lefBackg";
      } else {
        return 'rigBackg'
      }
    },
Style:
::v-deep .el-table__header-wrapper th.lefBackg {
  background: #8AABFB !important;
  color:#fff;
  font-weight: 400;
  font-size: 16px;
}
::v-deep .el-table__header-wrapper th.rigBackg {
  background: #4CBBEA !important;
  color:#fff;
  font-weight: 400;
  font-size: 16px;
}