vue2中table满足条件的行变红

最新推荐文章于 2025-07-14 23:37:06 发布

原创最新推荐文章于 2025-07-14 23:37:06 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

该文章展示了一段Vue.js代码，用于在表格中动态设置行类名。当提问时间超过48小时未回复时，行会变为红色。这通过比较当前时间戳和提问时间戳来实现，并使用`row-class-name`属性和自定义CSS来更改颜色。

效果图：

提问时间超过四十八小时未回复整行文字变红

html代码：

主要是这个api设置样式:row-class-name="tableAddClass"

<template>
<el-table
      v-loading="loading"
      border
      :data="dataList"
      :row-class-name="tableAddClass"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column :label="$t('LIMS.dy.question')" prop="questions" />
      <el-table-column :label="$t('LIMS.dy.reply')" prop="replyContent" />
      <el-table-column
        :label="$t('LIMS.dy.questionCcategorization')"
        prop="classifyName"
      />
      <el-table-column
        :label="$t('LIMS.dy.questioner')"
        prop="questionUserName"
      />
      <el-table-column :label="$t('LIMS.dy.questionTime')" width="180">
        <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{m}")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('LIMS.dy.replier')" prop="replyUserName" />
      <el-table-column :label="$t('LIMS.dy.recoveryTime')" width="180">
        <template slot-scope="scope">
          <span>{{
            parseTime(scope.row.replyTime, "{y}-{m}-{d} {h}:{m}")
          }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('LIMS.dy.state')" prop="questionStatus">
        <template slot-scope="scope">
          <span
            v-if="scope.row.questionStatus == 0"
            class="status-wait-for-reply"
            >{{ $t("status.waitForReply") }}</span
          >
          <span
            v-else-if="scope.row.questionStatus == 1"
            class="status-replied"
            >{{ $t("status.replied") }}</span
          >
          <span
            v-else-if="scope.row.questionStatus == 3"
            class="status-unsolved"
            >{{ $t("status.unsolved") }}</span
          >
          <span
            v-else-if="scope.row.questionStatus == 2"
            class="status-resolved"
            >{{ $t("status.resolved") }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('common.operation')"
        class-name="small-padding fixed-width"
        fixed="right"
      >
        <template slot-scope="scope">
          <!-- 详情 -->
          <el-button
            size="mini"
            type="text"
            v-hasPermi="['question:answerManage:query']"
            @click="onOpen('detail', scope.row.questionAnswerId)"
          >
            {{ $t("common.details") }}
          </el-button>
       
          <!-- 删除 -->
          <el-button
            size="mini"
            type="text"
            @click="onOpen('delete', scope.row.questionAnswerId)"
          >
            {{ $t("common.delete") }}
          </el-button>
          <!-- 未解决 -->
          <el-button
            size="mini"
            type="text"
            v-show="scope.row.questionStatus == 1"
            v-hasPermi="['question:answerManage:noSolve']"
            @click="onOpen('unsolved', scope.row.questionAnswerId)"
          >
            {{ $t("status.unsolved") }}
          </el-button>
          <!-- 已解决 -->
          <el-button
            size="mini"
            type="text"
            v-show="scope.row.questionStatus == 1"
            v-hasPermi="['question:answerManage:solve']"
            @click="onOpen('resolved', scope.row.questionAnswerId)"
          >
            {{ $t("status.resolved") }}
          </el-button>
          <!-- 回复 -->
          <el-button
            size="mini"
            type="text"
            v-show="scope.row.questionStatus != 2"
            v-hasPermi="['question:answerManage:reply']"
            @click="onOpen('reply', scope.row.questionAnswerId)"
          >
            {{ $t("LIMS.dy.reply") }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
</template>

js代码：

create(){
//获取当前时间戳
this.timestamp = Date.parse(new Date());
}

 tableAddClass({ row, rowIndex }) {
//判断当前时间戳减去提问时间戳是否大于48小时，是就引用tr-red className样式
      if (
        row.questionStatus == 0 &&
        (this.timestamp - new Date(row.createTime).getTime()) /
          (60 * 60 * 1000) >
          48
      ) {
        return "tr-red";
      }
      return "";
    },

css代码

<style scoped>
.app-container /deep/ .el-table .tr-red {
  color: red !important;
}