个人记录不通用
<template>
<cl-crud @load="onLoad" ref="crud">
<!-- 表格 -->
<el-row class="flex-full">
<div style="">
<el-table
class="main-table"
:data="tableData"
style="width: 100%"
:span-method="handleSpanMethod"
>
<el-table-column
label="序号"
width="80"
type="index"
></el-table-column>
<!-- 纵向表头 -->
<el-table-column label="分析对象" prop="targetName" width="180px">
</el-table-column>
<el-table-column label="分析单元" prop="name" width="180px">
</el-table-column>
<!-- 横向表头和数据列 -->
<el-table-column label="固有风险等级">
<el-table-column
v-if="list.inherentRiskLevelTitle"
v-for="(item, index) in list.inherentRiskLevelTitle"
:key="index"
:prop="'inherentValue' + index"
:label="item"
>
</el-table-column>
<el-table-column
v-if="!list.inherentRiskLevelTitle"
prop="inherentValue"
:label="item"
>
</el-table-column>
</el-table-column>
<el-table-column label="控制风险等级">
<el-table-column
v-if="list.controlRiskLevelTitle"
:prop="'controlValue' + index"
:label="item"
v-for="(item, index) in list.controlRiskLevelTitle"
:key="index"
>
</el-table-column>
<el-table-column
v-if="!list.controlRiskLevelTitle"
prop="controlValue"
label=""
>
</el-table-column>
</el-table-column>
<!-- 自定义内容插槽 -->
<template v-slot:append>
<div
style="
width: 100%;
height: 60px;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
"
>
总风险点合计:{{ list.totalPoint }}
</div>
</template>
</el-table>
</div>
</el-row>
</cl-crud>
</template>
<script>
export default {
data() {
return {
list: [],
selectedIds: [],
queryForm: {},
tableData: [],
form: {},
customData: [],
};
},
mounted() {},
methods: {
getTableData(data) {
// 处理表格数据
data.rmSclAnalysisRiskList = (data.rmSclAnalysisRiskList || []).map(
(item) => {
// 固有
let inherentList = {};
(item.inherentRiskPointList || []).map((row, index) => {
//将inherentRiskPointList里面的每个元素拎出来并赋予prop
inherentList[`inherentValue` + index] = row;
});
// 控制
let controlList = {};
(item.controlRiskPointList || []).map((row, index) => {
controlList[`controlValue` + index] = row;
});
return {
...item,
...inherentList,
...controlList,
};
}
);
this.$set(this, "list", data);
this.$set(this, "tableData", data.rmSclAnalysisRiskList);
},
handleSpanMethod({ row, column, rowIndex, columnIndex }) {
// 处理最后一行的合计合并
if (rowIndex === this.tableData.length - 1) {
if (columnIndex === 1)
return {
rowspan: 1,
colspan: 2,
};
if (columnIndex === 2)
return {
rowspan: 0,
colspan: 0,
};
} else {
// 处理第二列的相同数据的合并
// 判断哪一列 如果需要处理多了 使用 || 进行处理即可
if (columnIndex === 1) {
const _row = this.flitterDatas(this.tableData).one[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
}
},
/**合并表格的第一列,处理表格数据 */
flitterDatas(arr) {
let spanOneArr = [];
let concatOne = 0;
arr.forEach((item, index) => {
// console.log(item, index);
if (index === 0) {
spanOneArr.push(1);
} else {
//注意这里的data是表格绑定的字段,根据自己的需求来改
if (item.targetName === arr[index - 1].targetName) {
//第一列需合并相同内容的判断条件
spanOneArr[concatOne] += 1;
spanOneArr.push(0);
} else {
spanOneArr.push(1);
concatOne = index;
}
}
});
return {
one: spanOneArr,
};
},
handleReset() {
this.$set(this.queryForm, "analyticalMethod", "3");
this.$refs.crud.refresh({ ...this.queryForm });
},
},
};
</script>
<style lang="less" scoped>
::v-deep .main-table {
border-bottom: 1px solid #ccc !important;
border-right: 1px solid #ccc !important;
}
::v-deep .main-table .el-table__cell {
border: 1px solid #ccc;
}
::v-deep .el-table th {
/* 表头字体大小 */
/* font-size: 18px !important; */
}
::v-deep .el-table .el-table__header th,
.el-table .el-table__header tr,
.el-table .el-table__header td {
/* 表头颜色 */
background: #f1f1f1 !important;
}
::v-deep .main-table .cell {
/* 表格全局字体颜色 */
/* color: red !important; */
/* 字体居中 */
text-align: center;
}
::v-deep .main-table .el-table__empty-block {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
</style>