<template>
<div class="content-body">
<div
style="
height: calc(100% - 30px);
border-radius: 8px;
box-sizing: border-box;
overflow: hidden;
"
>
<el-table
:data="tableData"
:span-method="objectSpanMethod"
style="width: 100%; margin-top: 20px border-radius: 8px; height: calc(100% - 60px);width: 100%;"
header-cell-class-name="header-cell-class"
:cell-style="rowClass"
@cell-mouse-leave="cellMouseLeave"
@cell-mouse-enter="cellMouseEnter"
border
:row-class-name="tableRowClassName"
>
<el-table-column sortable type="selection"></el-table-column>
<el-table-column
label="序号"
prop="Nosort"
width="60px"
></el-table-column>
<el-table-column label="作业类型" prop="workTypeName"></el-table-column>
<el-table-column label="作业级别" prop="dictLabel"> </el-table-column>
</el-table>
<div
style="height:60px;background-color: #fff;display: flex;justify-content: flex-end;align-items: center;padding-right: 100px;"
>
<el-pagination
:page-sizes="[10, 20, 30, 40, 50, 100, 200]"
layout="total, sizes, prev, pager, next, jumper"
>
</el-pagination>
</div>
</div>
</div>
</template>
<script>
export default {
name: "",
data() {
return {
// 表格数据
tableData: [],
OrderIndexArr: [],
hoverOrderArr: [],
rowIndex: "-1",
spanMethodOption: []
};
},
created() {
this._typeAndLevel();
this.getOrderNumber();
},
methods: {
// 表格数据居中
rowClass() {
return "text-align:center";
},
_typeAndLevel() {
setTimeout(() => {
let arr = [];
this.$store.state.taskdictMapData.work_type.forEach(item => {
if (item.children !== null) {
item.children.forEach(v => {
let obj = {
dictLabel: v.dictLabel,
dictValue: v.dictValue,
dictId: v.dictId,
workTypeName: item.dictLabel,
typeId: item.dictId
};
arr.push(obj);
});
} else {
arr.push(item);
}
});
this.tableData = arr;
}, 10);
},
// 合并单元格
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
for (let i = 0; i < this.OrderIndexArr.length; i++) {
let element = this.OrderIndexArr[i];
for (let j = 0; j < element.length; j++) {
let item = element[j];
if (rowIndex == item) {
if (j == 0) {
return {
rowspan: element.length,
colspan: 1
};
} else if (j != 0) {
return {
rowspan: 0,
colspan: 0
};
}
}
}
}
}
},
tableRowClassName({ row, rowIndex }) {
let rowArr = [];
let arr = this.hoverOrderArr;
for (let i = 0; i < arr.length; i++) {
if (rowIndex == arr[i]) {
return "hovered-row";
}
}
this.tableData.forEach(item => {
if (!this.spanMethodOption.includes(item.workTypeName)) {
this.spanMethodOption.push(item.workTypeName);
}
});
this.spanMethodOption.forEach((item, index) => {
if (row.workTypeName == item) {
if (index % 2 === 0) {
rowArr.push("cell-base");
} else {
rowArr.push("cell-even");
}
}
});
return rowArr;
},
cellMouseEnter(row, column, cell, event) {
this.rowIndex = row.rowIndex;
this.hoverOrderArr = [];
this.OrderIndexArr.forEach(element => {
if (element.indexOf(this.rowIndex) >= 0) {
this.hoverOrderArr = element;
}
});
},
cellMouseLeave(row, column, cell, event) {
this.rowIndex = "-1";
this.hoverOrderArr = [];
},
getOrderNumber() {
setTimeout(() => {
let OrderObj = {};
this.tableData.forEach((element, index) => {
element.rowIndex = index;
if (OrderObj[element.workTypeName]) {
OrderObj[element.workTypeName].push(index);
} else {
OrderObj[element.workTypeName] = [];
OrderObj[element.workTypeName].push(index);
}
});
// 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）
let Nosort = 1;
this.tableData.forEach((v, i) => {
if (i == 0) {
v.Nosort = Nosort;
}
if (i > 0) {
if (v.workTypeName == this.tableData[i - 1].workTypeName) {
v.Nosort = Nosort;
} else {
Nosort += 1;
v.Nosort = Nosort;
}
}
});
for (let k in OrderObj) {
this.OrderIndexArr.push(OrderObj[k]);
}
}, 100);
}
}
};
</script>版权声明：本文为m0_59955777原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。