**

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

**

先看最终样式

首先是tempate标签里的内容

<template><div class="app-container"><div class="filter-container"><el-selectv-model="queryModel.type"collapse-tagsclass="filter-item"placeholder="请选择统计类型"><el-optionv-for="item in typeList":key="item":label="item":value="item"/></el-select><el-buttonv-wavesclass="filter-item ml-3"type="primary"icon="el-icon-search"@click="getList">{{ $t('webevent.search') }}//搜索的中英文切换</el-button><el-buttonv-wavesclass="filter-item"type="primary":disabled="queryModel.monthIndex===2"@click="lastMonth"><i class="el-icon-caret-left" />{{ $t('webevent.lastMonth') }}//按钮显示上个月，中英文切换$t</el-button><el-buttonv-wavesclass="filter-item"type="primary":disabled="queryModel.monthIndex===0"@click="nextMonth">{{ $t('webevent.nextMonth') }}<i class="el-icon-caret-right" /></el-button><el-buttonv-wavesclass="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"borderstripefit><el-table-columnv-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-columnv-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><!-- 标准 --><el-table-column :label="$t('todayProduce.standard')" width="120"><template slot-scope="scope"><span style="color:#c90a5b;font-size:16px;font-weight:550;"> {{ scope.row.standard }} </span></template></el-table-column></el-table-column><!-- 表格数据 --><el-table-column v-for=" (item, index) in cloumnList" :key="index" :label="item"><template slot-scope="scope">{{ scope.row.datas[index] }}</template></el-table-column></el-table></div>
</template>

script标签的内容

<script>
import operationMixin from '@/mixin/private/permission';
import { getDailyProduceData, getStandardParameter, exportDailyProduceData } from '@/api/dailyProduce';
import waves from '@/directive/waves';
import { mapGetters } from 'vuex';
import { formatDate } from '@/utils/index';var today = new Date();// 获取当月天数
var curretMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);
var curretMonthDayCount = curretMonth.getDate();
// 获取上个月天数
var preMonth = new Date(today.getFullYear(), today.getMonth(), 0);
var preMonthDayCount = preMonth.getDate();
// 获取前一个月天数
var beforePreMonth = new Date(today.getFullYear(), today.getMonth() - 1, 0);
var beforePreMonthDayCount = beforePreMonth.getDate();
// 无类型的总行数
var totalRowCount = 17;
// 区域和班组分别的总行数
var areaAndTeamRowCount = 14;
export default {directives: { waves },mixins: [operationMixin],data() {return {tableHeight: 0,list: [],dayCount: curretMonthDayCount,teamShow: false,areaShow: false,standardParameter: {},typeList: ['无', '班次', '区域'],cloumnList: [],queryModel: {type: '无',today: formatDate(today),monthIndex: 0}};},computed: {...mapGetters(['isH5']),tableTitle() { // 表的标题if (this.queryModel.monthIndex === 0) { // 本月return `${today.getFullYear()}-` + `${today.getMonth() + 1}`.padStart(2, '0') + '月 每日生产数据汇总';} else if (this.queryModel.monthIndex === 1) { // 上月return `${today.getFullYear()}-` + `${today.getMonth()}`.padStart(2, '0') + '月 每日生产数据汇总';} else if (this.queryModel.monthIndex === 2) { // 上上个月return `${today.getFullYear()}-` + `${today.getMonth() - 1}`.padStart(2, '0') + '月 每日生产数据汇总';} else {return '';}}},mounted() {this.$nextTick(() => {this.tableHeight = window.innerHeight * 0.75;});},created() {this.getStandardParameter();},methods: {async getStandardParameter() { // 得到标准数据const res = await getStandardParameter();this.standardParameter = res.data;this.getList();},async getList() {const res = await getDailyProduceData(this.queryModel);this.list = res.data.values;// 从这直接得到values对象this.cloumnList = res.data.columnLabel;if (this.queryModel.type === '班次') {this.areaShow = false;this.teamShow = true;} else if (this.queryModel.type === '区域') {this.teamShow = false;this.areaShow = true;} else {this.areaShow = false;this.teamShow = false;}},getRowClass ({ row, column, rowIndex, columnIndex }) { // 日期列，班组或者区域列的背景颜色if (!this.areaShow && !this.teamShow) {if ((rowIndex === 0 && columnIndex === 0) || (rowIndex === 1 && (columnIndex === 0 || columnIndex === 1))) {return 'background:#c90a5b;color:#fff;text-align:center;font-size:15px;font-weight:550;';} else {return '';}} else {if ((rowIndex === 0 && columnIndex < 2) || (rowIndex === 1 && columnIndex < 3)) {return 'background:#c90a5b;color:#fff;text-align:center;font-size:15px;font-weight:550;';} else {return '';}}},cellStyle({ row, column, rowIndex, columnIndex }) {var addTypeColumn = (this.teamShow || this.areaShow) ? 1 : 0; // 没有班组或区域，值为1, 否则值为0var diffRow = (this.teamShow || this.areaShow) ? 3 : 0; // 3是区域或者班组类型 ，0是无类型var temCount = diffRow > 0 ? areaAndTeamRowCount : totalRowCount;if (columnIndex < 2 + addTypeColumn) {return '';}var cellValue = row.datas[columnIndex - 2];var cellStyle = 'font-weight:550;';var standardValue = 0.0;if (this.areaShow) { // 比较区域与标准数据的断线次数standardValue = this.standardParameter.disconnectAreaCount;} else if (this.teamShow) { // 比较班组与标准数据的断线次数standardValue = this.standardParameter.disconnectTeamCount;} else { // 比较无类型与标准数据的断线次数standardValue = this.standardParameter.disconnectCount;}if (diffRow === 0 && rowIndex % temCount === 0) {// 炉台开启数if (cellValue < this.standardParameter.stoveRunCount) {return cellStyle + 'color:#f00;';}// diffRow是0，是无类型，并且是第一行，是当日产量} else if (diffRow === 0 && rowIndex % temCount === 1) {// 当日产量if (cellValue < this.standardParameter.dailyYield) {return cellStyle + 'color:#f00;';}} else if (diffRow === 0 && rowIndex % temCount === 2) {// 等径台数if (cellValue < this.standardParameter.equalCount) {return cellStyle + 'color:#f00;';}} else if (rowIndex % temCount === 3 - diffRow) { // 类型是班组和区域，断线是第0行；无类型时，断线是第3行// 断线次数if (cellValue > standardValue) { // 比较断线次数return cellStyle + 'color:#f00;';}} else if (rowIndex % temCount === 4 - diffRow) {// 当班引放if (cellValue < this.standardParameter.seedCount) {return cellStyle + 'color:#f00;';}} else if (rowIndex % temCount === 5 - diffRow) {// 加料效率if (cellValue < this.standardParameter.feedEfficiency) {return cellStyle + 'color:#f00;';}} else if (rowIndex % temCount === 6 - diffRow) {// 停炉工时if (cellValue > this.standardParameter.shutdownTime) {return cellStyle + 'color:#f00;';}} else if (rowIndex % temCount === 7 - diffRow) {// 拆装工时if (cellValue > this.standardParameter.dismantleTime) {return cellStyle + 'color:#f00;';}} else if (rowIndex % temCount === 8 - diffRow) {// 抽空工时if (cellValue > this.standardParameter.extractAirTime) {return cellStyle + 'color:#f00;';}} else if (rowIndex % temCount === 9 - diffRow) {// 熔料工时if (cellValue > this.standardParameter.meltTime) {return cellStyle + 'color:#f00;';}} else if (rowIndex % temCount === 10 - diffRow) {// 调温工时if (cellValue > this.standardParameter.seedCost) {return cellStyle + 'color:#f00;';}} else if (rowIndex % temCount === 11 - diffRow) {// 引晶工时if (cellValue > this.standardParameter.seedCrystalTime) {return cellStyle + 'color:#f00;';}} else if (rowIndex % temCount === 12 - diffRow) {// 放肩工时if (cellValue > this.standardParameter.shoulderTime) {return cellStyle + 'color:#f00;';}} else if (rowIndex % temCount === 13 - diffRow) {// 转肩工时if (cellValue > this.standardParameter.rotationTime) {return cellStyle + 'color:#f00;';}} else if (rowIndex % temCount === 14 - diffRow) {// 等径工时if (cellValue > this.standardParameter.equalTime) {return cellStyle + 'color:#f00;';}} else if (rowIndex % temCount === 15 - diffRow) {// 收尾工时if (cellValue > this.standardParameter.endTime) {return cellStyle + 'color:#f00;';}} else if (rowIndex % temCount === 16 - diffRow) {// 取棒工时if (cellValue > this.standardParameter.takeStickTime) {return cellStyle + 'color:#f00;';}}},async handleExport() {const res = await exportDailyProduceData(this.queryModel);window.open(`${process.env.NODE_ENV === 'development' ? process.env.VUE_APP_BASE_API : window.location.origin}/${res.data.downPath}`);},// 合并单元格rowSpanMethod({ row, column, rowIndex, columnIndex }) {/*** 表格合并* row 表格每一行的数据* column 表格每一列的数据* rowIndex 表格的行索引,不包括表头,从0开始* columnIndex 表格的列索引,从0开始*/if (this.areaShow || this.teamShow) {if (columnIndex === 0) {if (rowIndex % areaAndTeamRowCount === 0) { // 同个班组或同个区域合并return [areaAndTeamRowCount, 1];} else {return [0, 0];}}}},// 前一月lastMonth() {this.queryModel.monthIndex += 1;if (this.queryModel.monthIndex === 1) { //  上个月this.dayCount = preMonthDayCount;this.getList();} else if (this.queryModel.monthIndex === 2) { // 前一个月this.dayCount = beforePreMonthDayCount;this.getList();}},// 后一月nextMonth() {this.queryModel.monthIndex -= 1;if (this.queryModel.monthIndex === 1) { //  上个月this.dayCount = preMonthDayCount;this.getList();} else if (this.queryModel.monthIndex === 0) { // 本月this.dayCount = curretMonthDayCount;this.getList();}}}
};
</script>

关于script部分代码的解释

首先定义好无类型一共是17行数据，区分班组和区域时，是14行数据。

// 无类型的总行数
var totalRowCount = 17;
// 区域和班组分别的总行数
var areaAndTeamRowCount = 14;

表的标题是动态改变的。today.getFullYear()，today.getMonth() + 1，得到的月比现在少一个月，所以需要加1，代表当前月。padStart(2, ‘0’)代表保留两位，如果不够的话，在数的前面补0。

var today = new Date();

    computed: {...mapGetters(['isH5']),tableTitle() { // 表的标题if (this.queryModel.monthIndex === 0) { // 本月return `${today.getFullYear()}-` + `${today.getMonth() + 1}`.padStart(2, '0') + '月 每日生产数据汇总';} else if (this.queryModel.monthIndex === 1) { // 上月return `${today.getFullYear()}-` + `${today.getMonth()}`.padStart(2, '0') + '月 每日生产数据汇总';} else if (this.queryModel.monthIndex === 2) { // 上上个月return `${today.getFullYear()}-` + `${today.getMonth() - 1}`.padStart(2, '0') + '月 每日生产数据汇总';} else {return '';}}},

getRowClass方法，在el-table上绑定:header-cell-style=“getRowClass”。四个参数代表，row每一行的值，column代表每一列的值。rowIndex代表每一行的索引值，columnIndex代表每一列的索引值。
rowIndex == = 0 & & columnIndex = = = 0代表第0行第0列。表头不算进去，是从数据行开始算第0行。

        getRowClass ({ row, column, rowIndex, columnIndex }) { // 日期列，班组或者区域列的背景颜色if (!this.areaShow && !this.teamShow) {if ((rowIndex === 0 && columnIndex === 0) || (rowIndex === 1 && (columnIndex === 0 || columnIndex === 1))) {return 'background:#c90a5b;color:#fff;text-align:center;font-size:15px;font-weight:550;';} else {return '';}} else {if ((rowIndex === 0 && columnIndex < 2) || (rowIndex === 1 && columnIndex < 3)) {return 'background:#c90a5b;color:#fff;text-align:center;font-size:15px;font-weight:550;';} else {return '';}}},

让单元格的值与标准数值，比较，如果小于标准数值，把单元格的样式追加一个#f00颜色

if (cellValue < this.standardParameter.stoveRunCount) {return cellStyle + 'color:#f00;';}

导出excel按钮的实现，这里是调用了exportDailyProduceData的接口实现的。

        async handleExport() {const res = await exportDailyProduceData(this.queryModel);window.open(`${process.env.NODE_ENV === 'development' ? process.env.VUE_APP_BASE_API : window.location.origin}/${res.data.downPath}`);},

合并单元格的实现，rowSpanMethod，在el-table标签上绑定:span-method=“rowSpanMethod”。
return [areaAndTeamRowCount, 1];代表合并areaAndTeamRowCount个值的行数，1列。

 // 合并单元格rowSpanMethod({ row, column, rowIndex, columnIndex }) {/*** 表格合并* row 表格每一行的数据* column 表格每一列的数据* rowIndex 表格的行索引,不包括表头,从0开始* columnIndex 表格的列索引,从0开始*/if (this.areaShow || this.teamShow) {if (columnIndex === 0) {if (rowIndex % areaAndTeamRowCount === 0) { // 同个班组或同个区域合并return [areaAndTeamRowCount, 1];} else {return [0, 0];}}}},

el-table-column的lalel可以循环赋值。v-for=" (item, index) in cloumnList"，item是每一项的值，index是每一项的索引。是从0开始的。

            <!-- 表格数据 --><el-table-column v-for=" (item, index) in cloumnList" :key="index" :label="item"><template slot-scope="scope">{{ scope.row.datas[index] }}</template></el-table-column>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！