<template>
<div class="sfzy">
<div class="ejbt"><p>服装订单统计</p></div>
<div class="tableBox">
<el-table :data="tableInfo.tableData" :span-method="objectSpanMethod"
height="765px"
empty-text="暂无记录"
:header-cell-style="{
height:'40px',
padding:'0px',
color: 'rgb(126, 224, 238)',
'font-size':'16px',
background:'rgba(0, 34, 68, 1)',
}"
:cell-style="{
height:'38px',
padding:'0px',
color:'#fff',
border:'1px solid #003645',
'font-size':'16px',
'font-family': 'SourceHanSansCN-Regular',
}"
:row-style="{background:'rgba(0, 34, 68, 0.001)',}"
:row-class-name="isCell ? setCellClass : ''"
@cell-mouse-enter="handleMouse"
@cell-mouse-leave="handleMouseLeve"
>
<el-table-column label="订单编号" prop="zyh" width="270px"></el-table-column>
<el-table-column label="订单类型" prop="zylx"></el-table-column>
<el-table-column label="服装代码" prop="fzdm"></el-table-column>
<el-table-column label="服装名称" prop="fzmc" width="200px"></el-table-column>
<el-table-column label="下单时间" prop="xdsj" width="200px"></el-table-column>
<el-table-column label="尺码" prop="fzcm"></el-table-column>
<el-table-column label="件数" prop="fzjs"></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
export default {
data(){
return{
cellIndex: null, // 两层合并的数据
isCell:false,
tableInfo:{
tableData:[
],
},
}
},
methods:{
// 设置行样式
setCellClass ({row, column, rowIndex, columnIndex}) {
if (row.index == this.cellIndex) {
return 'cellClass'
}
},
// 单元格移入事件
handleMouse (row, column, cell, event) {
this.cellIndex = row.firstIndex
this.isCell = true
// }
},
// 单元格移除事件
handleMouseLeve () {
this.isCell = false
},
objectSpanMethod({ row, column, rowIndex, columnIndex }){
if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3|| columnIndex === 4) {
if (rowIndex === 0 || row.zyh !== this.tableInfo.tableData[rowIndex - 1].zyh) {
const rowspan = this.tableInfo.tableData.filter(item => item.zyh === row.zyh).length;
return { rowspan, colspan: 1 };
} else {
return { rowspan: 0, colspan: 0 };
}
}
},
updateTableData(rows) {
let data = [...rows];
let groupedData = [];
let previousLljbm = null;
data.forEach((item, index) => {
item.index = index;
if (item.zyh !== previousLljbm) {
previousLljbm = item.zyh;
item.firstIndex = `${index}`;
} else {
item.firstIndex = `${groupedData.findIndex(group => group.zyh === item.zyh)}`;
}
groupedData.push(item);
});
this.tableInfo.tableData = groupedData ;
},
getData(){
// sfzyData().then(res=>{
let data = [
{zyh: 'FZ202603030001',zylx: '普通服装',fzdm: 'FZDM002',fzmc: '外套',xdsj: '2022-01-01 10:00:00',fzcm: 'XS码',fzjs: '100.00',},
{zyh: 'FZ202603030001',zylx: '普通服装',fzdm: 'FZDM002',fzmc: '外套',xdsj: '2022-01-01 10:00:00',fzcm: 'S码',fzjs: '100.00',},
{zyh: 'FZ202603030001',zylx: '普通服装',fzdm: 'FZDM002',fzmc: '外套',xdsj: '2022-01-01 10:00:00',fzcm: 'M码',fzjs: '100.00',},
{zyh: 'FZ202603030001',zylx: '普通服装',fzdm: 'FZDM002',fzmc: '外套',xdsj: '2022-01-01 10:00:00',fzcm: 'L码',fzjs: '100.00',},
{zyh: 'FZ202603030001',zylx: '普通服装',fzdm: 'FZDM002',fzmc: '外套',xdsj: '2022-01-01 10:00:00',fzcm: 'XL码',fzjs: '100.00',},
{zyh: 'FZ202603030002',zylx: '精品服装',fzdm: 'FZDM001',fzmc: '外套',xdsj: '2022-01-01 10:00:00',fzcm: 'XS码',fzjs: '100.00',},
{zyh: 'FZ202603030002',zylx: '精品服装',fzdm: 'FZDM001',fzmc: '外套',xdsj: '2022-01-01 10:00:00',fzcm: 'S码',fzjs: '100.00',},
{zyh: 'FZ202603030002',zylx: '精品服装',fzdm: 'FZDM001',fzmc: '外套',xdsj: '2022-01-01 10:00:00',fzcm: 'M码',fzjs: '100.00',},
{zyh: 'FZ202603030002',zylx: '精品服装',fzdm: 'FZDM001',fzmc: '外套',xdsj: '2022-01-01 10:00:00',fzcm: 'L码',fzjs: '100.00',},
{zyh: 'FZ202603030002',zylx: '精品服装',fzdm: 'FZDM001',fzmc: '外套',xdsj: '2022-01-01 10:00:00',fzcm: 'XL码',fzjs: '100.00',},
{zyh: 'FZ202603030003',zylx: '精品服装',fzdm: 'FZDM001',fzmc: '外套',xdsj: '2022-01-01 10:00:00',fzcm: 'S码',fzjs: '100.00',},
{zyh: 'FZ202603030004',zylx: '精品服装',fzdm: 'FZDM001',fzmc: '外套',xdsj: '2022-01-01 10:00:00',fzcm: 'M码',fzjs: '100.00',},
];
let groupedData = [];
let previousLljbm = null;
data.forEach((item, index) => {
item.index = index;
if (item.zyh !== previousLljbm) {
previousLljbm = item.zyh;
item.firstIndex = `${index}`;
} else {
item.firstIndex = `${groupedData.findIndex(group => group.zyh === item.zyh)}`;
}
groupedData.push(item);
});
console.log(groupedData,"groupedData");
this.tableInfo.tableData = groupedData ;
}
},
mounted(){
this.getData()
},
}
</script>
<style lang="scss">
.sfzy{
width: 100%;
height: 100%;
position: relative;
background: #2083ab !important;
padding: 10px;
.ejbt{
color: rgb(255, 255, 255);
font-size: 20px;
font-family: SourceHanSansCN-Regular;
margin-bottom: 10px;
}
.myHeader{
position: absolute;
left: 0px;top: 0;
}
.tableBox{
width: 100%;
height: calc(100% - 68px);
position: relative;
.searchBox{
position: absolute;
right: 0px;
top: -46px;
}
}
// //去掉表格内的线
table th,
table td {
border: 1px solid rgb(0, 54, 69) !important;
}
//去掉最下面的那一条线
.el-table::before {
height: 0px;
}
.customer-table .el-table__fixed-right::before,
.el-table__fixed::before {
width: 0;
}
::v-deep .has-gutter .el-table__cell:last-child{
border-right: none;
}
::v-deep .has-gutter .el-table__cell:last-child{
border-right: none;
}
::v-deep .el-table__body {
border: none; /* 去掉表格的边框 */
}
.el-table th.el-table__cell {
background-color: rgba(0, 34, 68, 1);
}
// 滚动条样式修改
/* 滚动条轨道区域样式 */
::-webkit-scrollbar {
width: 4px; /* 设置滚动条宽度为8像素 */
background-color: transparent;
}
/* 滑块样式 */
::-webkit-scrollbar-thumb {
background-color:#0c7fb0; /* 设置滑块颜色为深灰色 */
border-radius: 4px; /* 设置滑块边角半径为4像素 */
}
/* 滚动条轨道内部空白区域样式 */
::-webkit-scrollbar-track {
background-color: rgba(0, 34, 68, 1); /* 设置轨道背景色为浅灰色 */
}
/* 滚动条两端按钮样式 */
::-webkit-scrollbar-button {
display: none; /* 不显示按钮 */
}
/* 交叉点处的区域样式 */
::-webkit-scrollbar-corner {
background-color: transparent; /* 设置交叉点处的背景色为透明 */
}
/* 调整大小手柄样式 */
::-webkit-resizer {
display: none; /* 不显示调整大小手柄 */
}
.el-table {
background: transparent !important;
height: 100% !important;
border: solid 1px #003645;
box-shadow: none;
.cellClass {
td:nth-child(1) {
background-color:#004662 !important;
}
td:nth-child(2) {
background-color:#004662 !important;
}
td:nth-child(3) {
background-color:#004662 !important;
}
td:nth-child(4) {
background-color:#004662 !important;
}
td:nth-child(5) {
background-color:#004662 !important;
}
}
th{
// border: 1px solid #004662;
border: 1px solid rgba(0, 34, 68, 1);
}
}
.el-table--scrollable-y .el-table__body-wrapper {
overflow-y: auto;
}
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
background-color: #004662 !important; /* 强制应用颜色 */
}
.el-table__empty-block {
height: 765px !important;
}
}
</style>
