效果图:
提问时间超过四十八小时未回复整行文字变红
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;
}