element ui 的el-table单独设置单元格最大值最小值样式

最新推荐文章于 2024-07-03 21:10:53 发布

软件测试小菜鸟正在更新中

最新推荐文章于 2024-07-03 21:10:53 发布

阅读量1.3k

点赞数

文章标签： elementui

本文链接：https://blog.csdn.net/weixin_43258184/article/details/119532791

版权

本文介绍了如何在Element UI的el-table组件中单独设置单元格的最大值和最小值样式。通过使用getRowClass方法绑定:header-cell-style属性，根据单元格值与标准值比较，动态调整单元格颜色。同时，文章还提到了导出Excel功能的实现以及合并单元格的方法。

摘要由CSDN通过智能技术生成

element ui 的el-table单独设置单元格最大值最小值样式

先看最终样式

在这里插入图片描述

首先是tempate标签里的内容

<template>
    <div class="app-container">
        <div class="filter-container">
            <el-select
                v-model="queryModel.type"
                collapse-tags
                class="filter-item"
                placeholder="请选择统计类型"
            >
                <el-option
                    v-for="item in typeList"
                    :key="item"
                    :label="item"
                    :value="item"
                />
            </el-select>
            <el-button
                v-waves
                class="filter-item ml-3"
                type="primary"
                icon="el-icon-search"
                @click="getList"
            >
                {
  { $t('webevent.search') }}//搜索的中英文切换
            </el-button>
            <el-button
                v-waves
                class="filter-item"
                type="primary"
                :disabled="queryModel.monthIndex===2"
                @click="lastMonth"
            >
                <i class="el-icon-caret-left" />
                {
  { $t('webevent.lastMonth') }}//按钮显示上个月，中英文切换$t
            </el-button>
            <el-button
                v-waves
                class="filter-item"
                type="primary"
                :disabled="queryModel.monthIndex===0"
                @click="nextMonth"
            >
                {
  { $t('webevent.nextMonth') }}
                <i class="el-icon-caret-right" />
            </el-button>
            <el-button
                v-waves
                class="filter-item"
                type="warning"
                icon="el-icon-download"
                @click="handleExport"
            >
                {
  { $t('webevent.export') }}
            </el-button>
        </div>
        <pre class="statistics-title">
            {
  { tableTitle }}
        </pre>
        <el-table
            :data="list"
            style="width: 100%;"
            :cell-style="cellStyle"
            :max-height="tableHeight"
            :header-cell-style="getRowClass"
            :span-method="rowSpanMethod"
            border
            stripe
            fit
        >
            <el-table-column
                v-if="teamShow"
                :key="9998"
                :label="$t('todayProduce.team')"
                fixed
            >
                <template slot-scope="scope">
                    <span style="color:#000;font-size:16px;font-weight:550;"> {
  { scope.row.team }} </span>
                </template>
            </el-table-column>
            <el-table-column
                v-if="areaShow"
                :key="9999"
                :label="$t('todayProduce.area')"
                fixed
            >
                <template slot-scope="scope">
                    <span style="color:#000;font-size:16px;font-weight:550;"> {
  { scope.row.area }} </span>
                </template>
            </el-table-column>
            <el-table-column
                :label="$t('todayProduce.dateTime')"
                width="240"
                fixed
            >
                <!-- 指标内容 -->
                <el-table-column :label="$t('todayProduce.target')" width="120">
                    <template slot-scope="scope">
                        <span style="color:#000;font-size:16px;font-weight:550;"> {
  { scope.row.target }} </span>
                    </template>
                </el-table-column>
                <!-- 标准 -->