element-ui中table组件多选框选中之后样式改变

element-ui中table组件多选框选中之后样式改变

最终实现的效果图：

<el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          height="calc(100% - 150px)"
          :header-cell-style="{
                              background: '#ECEDF1',
                              color: '#333333',
                              height: 48 + 'px',
                              }"
          @selection-change="handleSelectionChange"
          :row-class-name="selectRowClassName"
          @row-click="rowClickSelect" 
          >
    <el-table-column type="selection" align="left" width="30" />//在这里需要特别注意的就是width的取值，取值合适的情况下，在我们进行点击事情的时候，复选框的位置会进行跳动
    <el-table-column prop="examination" label="考场" />
    <el-table-column label="设备编号" prop="deviceId" />
    <el-table-column
                     label="屏蔽是否已开启"
                     prop="isOpen"
                     :filter-multiple="false"
                     :filters="[
                               { text: '是', value: '是' },
                               { text: '否', value: '否' },
                               ]"
                     :filter-method="filterStatus"
                     />
    <el-table-column prop="reportTime" label="上报时间" sortable />
    <el-table-column
                     prop="effect"
                     label="屏蔽效果"
                     :filter-multiple="false"
                     width="100"
                     :filters="[
                               { text: '已达标', value: '已达标' },
                               { text: '未达标', value: '未达标' },
                               ]"
                     :filter-method="filterEffect"
                     />
    <el-table-column prop="location" label="设备位置" />
    <el-table-column
                     prop="affiliation"
                     label="所属机构"
                     show-overflow-tooltip/>
    <el-table-column prop="operate" label="操作" width="60">
        <template slot-scope="scope">
            <el-button type="text" size="small" @click="toDetails(scope.row)">详情el-button>
        template>
    el-table-column>
el-table>

js代码片段：

 // 行添加class
    selectRowClassName({row, rowIndex}){
      console.log('添加类名',row,rowIndex);
        let color = "";
        this.multipleSelection.forEach(item => {
            if (item.id === row.id){
                color = "current";
            }
        });
        return color;
    },
    // 点击行即可勾选
    rowClickSelect(row, column, event){
         console.log(row,column,event);
        let index = this.multipleSelection.findIndex(item => {
            // 判断已选数组中是否已存在该条数据
            return item.id == row.id
        });
        if (index == -1) {
            // 如果未存在，设置已选状态，并在list中添加这条数据
            this.$refs.multipleTable.toggleRowSelection(row,true); //设置复选框为选中状态
        } else {
            // 如果已存在，设置未选状态，并在list中删除这条数据
            this.$refs.multipleTable.toggleRowSelection(row,false); //设置复选框为未选状态
        }
    },

css代码片段：

  ::v-deep .el-table__body .current>td {
        background-color:#D2DCF8 !important;
 }

::v-deep .el-table__body .current>td {
background-color:#D2DCF8 !important;
}

以上需要注意的一个点：在我们添加类名的时候，一定要将层次分清楚。