共计 10183 个字符，预计需要花费 26 分钟才能阅读完成。
废话不多说，先看成果如下，我固定的是前三列，简单表头渲染，是我前一章节说的 （https://segmentfault.com/a/11…）
1、elementui 的 table 的多级表头固定前 n 列（留神：n 列是依据 width 来固定的）的问题所在
1.1 发现给了 el-column 固定宽度，和 fixed 属性后，其余没有这两个属性的 el-column 局部被加上了 is-hidden 的类名（这个要浏览器控制台查看 html 构造代码才晓得），导致页面渲染的数据被暗藏了，所以要想方法去掉这个类名
1.2 通过查看 html 构造后，应用 jquery 去掉 is-hidden 类名（没有想到更好的方法，有其余方法的大神心愿能点拔我一下）2、解决的方法：
2.1 外围代码：this.$nextTick(() => {
// 如果不是固定列用这个
let myTrList = $('.kingChangeHead .el-table__header .has-gutter tr');
// 第一行表头（表头的款式）let colorTr = myTrList.eq(0);
let colorTh = colorTr.find('th').eq(0);
$(colorTh).removeClass('is-hidden');
$(colorTh)
.find('.cell')
.css({color: '#000', 'font-size': '18px', 'font-weight': 'bold'});
/**
* @Date: 2021-08-17
* @author @拿菜刀砍电线
* @Description: 为了解决 elementui 的简单表头，固定前三列的问题
* 问题剖析 1、发现给了固定宽度，和 fixed 属性后，没有固定的局部被加上了 is-hidden 的类名，导致页面数据被暗藏了，所以要想方法去掉这个类名
* 2、通过查看 html 构造后，应用 jquery 去掉 is-hidden 类名
*/
let kingBody = $('.kingChangeHead .el-table__body-wrapper .el-table__body tr');
kingBody.each(function(index, domEle) {$(domEle)
.find('td')
.each(function(index1, domEle1) {$(domEle1).removeClass('is-hidden');
});
});
if (this.$refs.mutipleTable !== undefined) {this.$refs.mutipleTable.doLayout();
}
});2.2 全副代码：<template>
<div class="barCodeManageIndex">
<div>
<div class="collapseContent">
<div id="searchForm" class="collapseCon">
<el-form label-position="right">
<div class="l-f">
<el-form-item label="年份:" label-width="50px">
<el-date-picker :clearable="false" format="yyyy" value-format="yyyy" v-model="searchForm.year" type="year" placeholder="请抉择"></el-date-picker>
</el-form-item>
<el-form-item label="月份:" label-width="50px">
<el-select :clearable="false" v-model.trim="searchForm.month" placeholder="请抉择">
<el-option v-for="(item, index) in monthList" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
</div>
</el-form>
</div>
</div>
</div>
<div class="collapseContent">
<div @click.self="show = !show" class="l-f l-flex-c collapseCon pointer">
<i @click.self="show = !show" class="el-icon-arrow-up o-mr-40" :class="{isRotate: !show}"></i>
<el-button class="o-ml-12" icon="el-icon-zoom-in" v-preventReClick type="goon" size="mini" @click="searchAll"> 查问 </el-button>
<el-button class="o-ml-12" icon="el-icon-my-export" v-preventReClick type="success" size="mini" @click="exportFile"> 导出 </el-button>
<el-button class="o-ml-12 kingButton" icon="el-icon-full-screen" v-preventReClick type="success" size="mini" @click="clickFullscreen('kingFullScreen')">
全屏显示
</el-button>
</div>
<div>
<el-collapse-transition>
<div v-show="show">
<div class="showToolTip changeElBoCoSt kingChangeHead">
<el-table
id="kingFullScreen"
v-loading="loading"
:cell-style="sca_CellStyle"
border
highlight-current-row
:height="clientHeight"
resizable
:data="tableData"
ref="mutipleTable"
:span-method="objectSpanMethod"
:header-cell-style="headerCellStyleNameKing"
:row-style="selectedHighlight_custom"
>
<el-table-column fixed width="300" :label="subCompanyMonth +' 月 - 五大战区各项品质汇总 '"align="center">
<el-table-column fixed :index="kingIndex" type="index" label="序号" width="60" align="center"></el-table-column>
<el-table-column fixed prop="type" label="类型" width="120" align="center">
<template slot-scope="scope">
<span v-if="scope.$index == 0" style="font-weight: bold;">
各区排名
<span style="color: blue;"> 第一 </span>
我的项目个数
</span>
<span v-else-if="scope.$index == 1" style="font-weight: bold;">
各区排名
<span style="color: red;"> 最初 </span>
我的项目个数
</span>
<span v-else>{{scope.row.type}}</span>
</template>
</el-table-column>
<el-table-column fixed prop="project" label="我的项目" width="120" align="center"></el-table-column>
<el-table-column
v-if="tableData && tableData.length > 0"
v-for="(value1, key, index) in tableDataDetail"
:key="index +'day'":label="key"align="center"
>
<el-table-column v-for="(value2, key2, index2) in value1" :key="index2" :label="key2" align="center">
<el-table-column v-for="(item1, index1) in value2" :key="index1" :label="item1.name" align="center">
<template slot-scope="scope">
<span
:style="{color: scope.row.daySale[key][key2][index1]['color'],
fontWeight: scope.row.daySale[key][key2][index1]['fontBold']
}"
>
{{scope.row.daySale[key][key2][index1]['value'] }}
</span>
</template>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table>
</div>
</div>
</el-collapse-transition>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'brCoInAn_daRe_ovSuOfThZone',
data() {
return {
// 代表的月份
subCompanyMonth: '',
formLabelWidth: '120px',
searchFormLableWidth: '100px',
// 查问参数
searchForm: {
month: '',
year: null
},
show: true,
tableData: [],
// 表格高度
clientHeight: null,
// 统计合并多少行
needMergeArr: ['type'], // 有合并项的列
rowMergeArrs: {} // 蕴含须要一个或多个合并项信息的对象};
},
computed: {monthList() {let monthList = [];
for (var i = 1; i < 13; i++) {
monthList.push({label: `${i} 月 `,
value: i
});
}
return monthList;
},
loading() {return this.GetStore('globalNotice', 'kingLoading');
},
tableDataDetail() {let tableData = [];
if (this.tableData && this.tableData.length > 0) {tableData = this.tableData[0]['daySale'];
}
return tableData;
}
},
mounted() {this.searchForm.year = this.GetCurrentTime().orderYear;
this.searchForm.month = Number(this.GetCurrentTime().yearMonth.substring(5, 7));
// 自定义 table 的宽度，为了固定表头
this.clientHeight = document.body.clientHeight - 230;
const that = this;
window.onresize = () => {return (() => {
window.clientHeight = document.body.clientHeight;
that.clientHeight = window.clientHeight - 230;
})();};
},
updated() {this.$nextTick(() => {if (this.$refs.mutipleTable !== undefined) {this.$refs.mutipleTable.doLayout();
}
});
},
methods: {
// 第一第二行背景色
selectedHighlight_custom({row, rowIndex}) {// if (rowIndex == 0 || rowIndex == 1) {
// return {
// 'background-color': '#ddd'
// };
// }
},
// 点击导出按钮
exportFile() {this.exportFile_king(this.$api.reBrGuAnalyAreaexportReport, this.searchForm);
},
/**
* @description 实现合并行或列
* @param row:Object 须要合并的列 name 如:'name' 'id'
* @param column:Object 以后行的行数，由合并函数传入
* @param rowIndex:Number 当前列的数据，由合并函数传入
* @param columnIndex:Number 当前列的数据，由合并函数传入
*
* @return 函数能够返回一个蕴含两个元素的数组，第一个元素代表 rowspan，* 第二个元素代表 colspan。也能够返回一个键名为 rowspan 和 colspan 的对象
*/
objectSpanMethod({row, column, rowIndex, columnIndex}) {
// 第一行的达成，环比，排名，列合并
if (rowIndex === 0 || rowIndex === 1) {if (column.label == '达成') {return [1, 3];
} else if (column.label == '环比') {return [0, 0];
} else if (column.label == '排名') {return [0, 0];
}
}
// 第一，第二行的 1,2,3 列合并
if (rowIndex === 0 || rowIndex === 1) {if (columnIndex === 0) {return [0, 0];
} else if (columnIndex === 1) {return [1, 3];
} else if (columnIndex === 2) {return [0, 0];
}
}
// 办法二:（合并行）for (let key in this.rowMergeArrs) {if (column.property == key) {let _row = this.rowMergeArrs[key].rowArr[rowIndex];
let _col = _row > 0 ? 1 : 0;
return [_row, _col];
}
}
},
// 用来合并表头的（label 为“整体”的高低两行合并）headerCellStyleNameKing({row, column, rowIndex, columnIndex}) {if (rowIndex === 0) {this.$nextTick(() => {if ($('.' + column.id).length !== 0) {$('.' + column.id + '.cell').css({color: '#111', 'font-weight': 'bold'});
}
});
return column;
} else if (rowIndex === 2) {if (column.label == '整体') {this.$nextTick(() => {if ($('.' + column.id).length !== 0) {$('.' + column.id + '.cell').css({color: '#111', 'font-weight': 'bold', 'font-size': '20px'});
$('.' + column.id).attr('rowspan', 2);
// var _c = document.getElementsByClassName(column.id);
// document.getElementsByClassName(column.id)[0].setAttribute('rowSpan', 2);
}
});
return column;
} else {
return {
textAlign: 'center',
color: '#111111',
fontSize: '16px',
fontWeight: 400
};
}
} else if (rowIndex === 3) {if (column.label == '整体') {return { display: 'none'};
} else {
return {
textAlign: 'center',
color: '#111111',
fontSize: '16px',
fontWeight: 400
};
}
} else {
return {
textAlign: 'center',
color: '#111111',
fontSize: '16px',
fontWeight: 400
};
}
},
// 解决下标从第二行开始，（数字要从 1 开始）kingIndex(index) {if (index != 0 || index != 1) {return index - 1;}
},
searchAll() {this.tableData = [];
this.getList();},
getList() {
// 因为工夫是肯定要的，如果用户没有抉择工夫，要强制
if (!this.searchForm.year) {this.searchForm.year = this.GetCurrentTime().orderYear;
}
if (!this.searchForm.month) {this.searchForm.month = Number(this.GetCurrentTime().yearMonth.substring(5, 7));
}
// 表头数据
this.subCompanyMonth = this.searchForm.month || '';
this.$store.commit('Edit_loading', true);
let param = this.searchForm;
this.$method(this.$api.reBrGuAnalygetAreaSumReport, 'post', param).then(res => {if (res.data && res.data.length > 0) {res.data.forEach((item, index) => {for (let key in item.daySale) {for (let key1 in item.daySale[key]) {item.daySale[key][key1].forEach((item1, index1) => {
// 色彩和加粗
item1.color = null;
item1.fontBold = null;
// 如果有值
if (item1.value != null) {
// 有没有变色
if (item1.isRanking == 1) {
item1.color = 'blue';
item1.fontBold = 'bold';
} else if (item1.isRanking == 2) {
item1.color = 'red';
item1.fontBold = 'bold';
}
// 看是不是整数类型
// 2 代表为整数
if (item1.algorithm != 2 && item1.algorithm != 4 && item1.algorithm != null) {item1.value = this.Big(item1.value).mul(100) + '%';
}
} else {item1.value = '-';}
});
}
}
});
}
this.tableData = res.data;
// 解决数据
this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData);
this.$nextTick(() => {
// 如果不是固定列用这个
let myTrList = $('.kingChangeHead .el-table__header .has-gutter tr');
// 第一行表头（表头的款式）let colorTr = myTrList.eq(0);
let colorTh = colorTr.find('th').eq(0);
$(colorTh).removeClass('is-hidden');
$(colorTh)
.find('.cell')
.css({color: '#000', 'font-size': '18px', 'font-weight': 'bold'});
/**
* @Date: 2021-08-17
* @author @拿菜刀砍电线
* @Description: 为了解决 elementui 的简单表头，固定前三列的问题
* 问题剖析 1、发现给了固定宽度，和 fixed 属性后，没有固定的局部被加上了 is-hidden 的类名，导致页面数据被暗藏了，所以要想方法去掉这个类名
* 2、通过查看 html 构造后，应用 jquery 去掉 is-hidden 类名
*/
let kingBody = $('.kingChangeHead .el-table__body-wrapper .el-table__body tr');
kingBody.each(function(index, domEle) {$(domEle)
.find('td')
.each(function(index1, domEle1) {$(domEle1).removeClass('is-hidden');
});
});
if (this.$refs.mutipleTable !== undefined) {this.$refs.mutipleTable.doLayout();
}
});
});
}
}
};
</script>
<style lang="scss">
.changeElBoCoSt {
.el-table .cell {color: #333;}
.el-table__header {
// border-right: 1px solid #000;
border-top: 1px solid #000;
border-left: 1px solid #000;
}
.el-table__body {
// border-right: 1px solid #000;
// border-bottom: 1px solid #000;
border-left: 1px dashed #000;
}
.el-table--border td {border-right: 1px dashed #000;}
.el-table--border th {border-right: 1px solid #000;}
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {border-right: 1px dashed #000;}
.el-table--border th {border-bottom: 1px solid #000;}
.el-table__fixed-right-patch {border-bottom: 1px dashed #000;}
.el-table td {border-bottom: 1px dashed #000;}
.el-table th.is-leaf {border-bottom: 1px solid #000;}
.el-table__header tr,
.el-table__header th {background-color: #ffc000 !important;}
// // body 的每一行的最初一个单元格
// .el-table__body tr td:last-child {
// border-right: 1px solid #000;
// }
// // body 的最初一行
// .el-table__body tr:last-child td {
// border-bottom: 1px solid #000;
// }
// //（刚好最初两行的第一列有合并才要这个）// .el-table__body tr:first-child td:first-child {
// border-bottom: 1px solid #000;
// }
// 双下划线（表体）// .kingRowIndex td {
// border-bottom: 2px solid #000000 !important;
// }
// 表头
// .kingRowIndex1 {
// border-right: 2px solid #000000 !important;
// }
}
</style>
正文完
发表至： element-ui
2021-08-17
