element 表格el-table改变hover背景颜色及选中改变背景颜色

表格数据

    <!-- 表格部分 -->
    <el-table
      :row-style="isRed"
      @selection-change="selected"
      :data="tableData"
      style="width: 100%"
      border
      @row-dblclick="ImfoClick"
      :headerCellStyle="{ backgroundColor: '#f2f4fa' }">
      <template #empty><el-empty description="暂无数据" /></template>
      <el-table-column type="selection" width="55" align="center" fixed> </el-table-column>
      <el-table-column prop="suppliesNumber" label="物料编号" width="200" align="center" show-overflow-tooltip fixed> </el-table-column>
      <el-table-column prop="suppliesName" label="名称" align="center" show-overflow-tooltip fixed width="200">
        <template slot-scope="scope">
          <span style="color: #1677ff;font-size: 13px;">{{ scope.row.suppliesName }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="amount" label="数量" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{  scope.row.amount < 0 ? 0 : scope.row.amount  }}
        </template>
      </el-table-column>

      <el-table-column prop="specification" label="规格" align="center"> </el-table-column>
      <el-table-column prop="batchNumber" label="批次号" align="center"> </el-table-column>
      <el-table-column prop="suppliesUnit" label="单位" show-overflow-tooltip align="center"> </el-table-column>
      <!-- <el-table-column prop="validTime" label="有效期" show-overflow-tooltip :formatter="validTimeDate" width="120" align="center"> -->
      <el-table-column prop="validTime" label="有效期" show-overflow-tooltip width="120" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.validTime">
            {{ $moment(scope.row.validTime).format("YYYY-MM-DD") }}
          </span>
          <span v-else>-</span>
          <!-- 可以用一个破折号表示无数据 -->
        </template>
      </el-table-column>
      <el-table-column prop="suppliesDetails" label="描述" show-overflow-tooltip width="220" align="center">
        <template slot-scope="scope">
          <div class="custom-supplies" v-text="stripHtml(scope.row.suppliesDetails)"></div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="createTime" label="创建时间" :formatter="startTimeDate" show-overflow-tooltip width="120" align="center"> -->
      <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip width="120" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.createTime">
            {{ $moment(scope.row.createTime).format("YYYY-MM-DD") }}
          </span>
          <span v-else>-</span>
          <!-- 可以用一个破折号表示无数据 -->
        </template>
      </el-table-column>
      <el-table-column prop="createName" label="创建人" align="center"> </el-table-column>
    </el-table>

hover背景颜色

表格中没用fixed

<style lang="scss" scoped>
/* 鼠标移入某行时的背景色 不添加fixed时可用 */
::v-deep .el-table__body {
  tr:hover > td {
    background-color: #fffaf1 !important;
  }
}
</style>

表格中使用了fixed

<style lang="scss">
/*鼠标移入某行时的背景色 添加fixed时可用*/
.el-table__body .el-table__row.hover-row td {
  background-color: #fffaf1 !important; /* 整行背景色 */
}
</style>

注意:使用了fixed的时候不可写在'scoped'下

选中改变背景颜色

selectedArrData: [], // 把选择到的当前行的id存到数组中

 methods: {
        // 复选框被选中的事件
    selected(row) {
      // console.log(row);//点击的那行数据
      this.selectedArrData = row;
    },

    isRed({ row }) {
      const checkIdList = this.selectedArrData.map((item) => item.id);
      if (checkIdList.includes(row.id)) {
        return {
          backgroundColor: "#e6f4ff"
          // color: "red"
        };
      }
    },
 }