el-table动态行和列及多级表头
主页面
<template> <div class="result-wrapper"> <dynamic-table :table-data="tableData" :table-header="tableConfig" :tableTitle="tableTitle" :flowParams="flowParams"></dynamic-table> </div> </template> <script> import DynamicTable from './components/DynamicTable' import dataInfo from "./data.json"; export default { props: {}, components: { DynamicTable }, data() { return { tableTitle: '邮政企业三级领导人员2024年7月绩效考核指标得分数据库', tableData: [], tableConfig: [] } }, computed: { }, async created() { }, methods: { openFlowPage() { let respData = dataInfo.data; if (respData.evalPerformanceRecordDetailList && respData.evalPerformanceRecordDetailList.length) { let list = JSON.parse(JSON.stringify(respData.evalPerformanceRecordDetailList)) // 表格业务数据 let tableData = JSON.parse(JSON.stringify(respData.evalPerformanceRecordDetailList)) // 表格业务数据 this.tableData = list this.tableConfigDeal(list[0].evalFormIndicatorBlocks) this.gettableData(tableData); console.log(this.tableConfig, 'tableConfig') console.log(this.tableData, 'tableData') } }, tableDataFormat () { const data = JSON.parse(JSON.stringify([...this.tableData])); data.forEach((item) => { const newArray = []; for (const key in item.value) { // console.log(item.value, 'item.value'); // console.log(key, 'key'); if (item.value[key]) { delete item.value[key].children newArray.push(item.value[key]) } } item.newArray = newArray delete item.value }) return data }, getForData(array, count) { if (count) { count++ } else { count = 1 } array.forEach((item) => { item.floor = count; if (item.children && item.children.length) { this.getForData(item.children, count) } else { item.children = [ { label: '标杆值', prop: 'benchmarkVal', valueData: item.id, formIndicatorBlockId: item.formIndicatorBlockId }, { label: '完成值', prop: 'completionVal', valueData: item.id, formIndicatorBlockId: item.formIndicatorBlockId }, { label: '建议得分', prop: 'scoreVal', valueData: item.id, formIndicatorBlockId: item.formIndicatorBlockId, } ] } if (item.floor === 2 && item && !this.hasLabelData(item.children, '建议得分合计')) { item.children.push({ label: '建议得分合计', prop: 'suggestScoreTotal', valueData: item.id, type: true, formIndicatorBlockId: item.formIndicatorBlockId }) if (item.isShowLeaderMarkScore) { item.children.push( { label: '领导评分', prop: 'leaderScore', valueData: item.id, type: false, formIndicatorBlockId: item.formIndicatorBlockId }) } } }) }, getTablejson(array, json, personObj, count) { if (count) { count++ } else { count = 1 } array.forEach((obj) => { if (obj.hasOwnProperty('suggestScoreTotal')) { json[obj.id] = { ...obj, }; } obj.floor = count; if (obj.children && obj.children.length) { this.getTablejson(obj.children, json, obj, count) } else { json[obj.id] = { ...obj, originDataNoChild: true }; } }); }, gettableData(array) { const tableData = []; array.forEach((item) => { const json = { value: {} }; json.id = item.empNumber; json.company = item.company; if (item.evalFormIndicatorBlocks && item.evalFormIndicatorBlocks.length) { item.evalFormIndicatorBlocks.forEach((list) => { this.getTablejson(list.children, json.value, list, 0); }) } tableData.push(json); }); this.tableData = tableData; }, tableConfigDeal(array) { // console.log(array, 'array'); this.getForData(array, 0); let tableConfig = [ { id: 10, label: '单位', prop: 'company' } ] this.tableConfig = tableConfig.concat(array); }, hasLabelData (children, key) { let flag = false for(let i = 0; i < children.length; i++) { if (children[i].label === key) { flag = true break } } return flag } } } </script> <style scoped lang="scss"> ::v-deep .el-table--border th, ::v-deep .el-table__fixed-right-patch { border-bottom: 1px solid #666666; } ::v-deep .el-table--border td, .el-table--border th, ::v-deep .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed { border-right: 1px solid #666666; } ::v-deep .el-table--border, ::v-deep .el-table--group { border: 1px solid #666666; } ::v-deep .el-table--border td, ::v-deep .el-table--border th, ::v-deep .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed { border-right: 1px solid #666666; } ::v-deep .el-table td, ::v-deep .el-table th.is-leaf { border-bottom: 1px solid #666666; } </style>
页面表格表头和表内容数据
{ "code": "0", "msg": "成功", "data": [ { "id": "8837445335765553152", "empNumber": "LXZT00002", "company": "石家庄", "evalFormIndicatorBlocks": [ { "id": "8837445339947274240", "performanceRecordId": "8837445334637285376", "sectionType": "quality", "children": [ { "id": "8837445434885345280", "parentId": null, "performanceRecordId": "8837445334637285376", "formIndicatorBlockId": "8837445339947274240", "scoreVal": null, "empNumber": "LXZT00001", "company": "唐山", "benchmarkVal": null, "completionVal": null, "score": "80", "suggestScoreTotal": null, "leaderScore": null, "informantNumber": "LXZT00008", "itemLevel": "/战略绩效得分", "children": null, "leaderMarkScoreList": null, "isShowLeaderMarkScore": null, "isCanLeaderMarkScore": null, "isCanScore": true, "label": "战略绩效得分" } ], "score": "80", "label": "战略绩效指标" }, { "id": "8837445391839203328", "performanceRecordId": "8837445334637285376", "sectionType": "quantity", "children": [ { "id": "8837445436214939648", "parentId": null, "performanceRecordId": "8837445334637285376", "formIndicatorBlockId": "8837445391839203328", "scoreVal": null, "empNumber": "LXZT00001", "company": "唐山", "benchmarkVal": null, "completionVal": null, "score": "6", "suggestScoreTotal": null, "leaderScore": null, "informantNumber": "LXZT00006", "itemLevel": "/“两集中”改革", "children": [ { "id": "8837445437431287808", "parentId": "8837445436214939648", "performanceRecordId": "8837445334637285376", "formIndicatorBlockId": "8837445391839203328", "scoreVal": null, "empNumber": "LXZT00001", "company": "唐山", "benchmarkVal": null, "completionVal": null, "score": "3", "suggestScoreTotal": null, "leaderScore": null, "informantNumber": "LXZT00006", "itemLevel": "/“两集中”改革/组织管理架构和质量指标体系建设情况", "children": null, "leaderMarkScoreList": null, "isShowLeaderMarkScore": null, "isCanLeaderMarkScore": null, "isCanScore": null, "label": "组织管理架构和质量指标体系建设情况" }, { "id": "8837445440002396160", "parentId": "8837445436214939648", "performanceRecordId": "8837445334637285376", "formIndicatorBlockId": "8837445391839203328", "scoreVal": null, "empNumber": "LXZT00001", "company": "唐山", "benchmarkVal": null, "completionVal": null, "score": "3", "suggestScoreTotal": null, "leaderScore": null, "informantNumber": "LXZT00006", "itemLevel": "/“两集中”改革/处理中心人均处理效率", "children": null, "leaderMarkScoreList": null, "isShowLeaderMarkScore": null, "isCanLeaderMarkScore": null, "isCanScore": null, "label": "处理中心人均处理效率" } ], "leaderMarkScoreList": null, "isShowLeaderMarkScore": null, "isCanLeaderMarkScore": null, "isCanScore": false, "label": "“两集中”改革" }, { "id": "8837445442326040576", "parentId": null, "performanceRecordId": "8837445334637285376", "formIndicatorBlockId": "8837445391839203328", "scoreVal": null, "empNumber": "LXZT00001", "company": "唐山", "benchmarkVal": null, "completionVal": null, "score": "7", "suggestScoreTotal": null, "leaderScore": null, "informantNumber": "LXZT00007", "itemLevel": "/协同与服务乡村振兴", "children": [ { "id": "8837445443424948224", "parentId": "8837445442326040576", "performanceRecordId": "8837445334637285376", "formIndicatorBlockId": "8837445391839203328", "scoreVal": null, "empNumber": "LXZT00001", "company": "唐山", "benchmarkVal": null, "completionVal": null, "score": "3", "suggestScoreTotal": null, "leaderScore": null, "informantNumber": "LXZT00006", "itemLevel": "/协同与服务乡村振兴/服务乡村振兴重点指标完成情况", "children": null, "leaderMarkScoreList": null, "isShowLeaderMarkScore": null, "isCanLeaderMarkScore": null, "isCanScore": null, "label": "服务乡村振兴重点指标完成情况" }, { "id": "8837445445991862272", "parentId": "8837445442326040576", "performanceRecordId": "8837445334637285376", "formIndicatorBlockId": "8837445391839203328", "scoreVal": null, "empNumber": "LXZT00001", "company": "唐山", "benchmarkVal": null, "completionVal": null, "score": "2", "suggestScoreTotal": null, "leaderScore": null, "informantNumber": "LXZT00007", "itemLevel": "/协同与服务乡村振兴/协同项目重点目标完成情况", "children": null, "leaderMarkScoreList": null, "isShowLeaderMarkScore": null, "isCanLeaderMarkScore": null, "isCanScore": null, "label": "协同项目重点目标完成情况" }, { "id": "8837445448374226944", "parentId": "8837445442326040576", "performanceRecordId": "8837445334637285376", "formIndicatorBlockId": "8837445391839203328", "scoreVal": null, "empNumber": "LXZT00001", "company": "唐山", "benchmarkVal": null, "completionVal": null, "score": "2", "suggestScoreTotal": null, "leaderScore": null, "informantNumber": "LXZT00007", "itemLevel": "/协同与服务乡村振兴/营销体系建设落实情况", "children": null, "leaderMarkScoreList": null, "isShowLeaderMarkScore": null, "isCanLeaderMarkScore": null, "isCanScore": null, "label": "营销体系建设落实情况" } ], "leaderMarkScoreList": null, "isShowLeaderMarkScore": true, "isCanLeaderMarkScore": true, "isCanScore": false, "label": "协同与服务乡村振兴" }, { "id": "8837445451129884672", "parentId": null, "performanceRecordId": "8837445334637285376", "formIndicatorBlockId": "8837445391839203328", "scoreVal": null, "empNumber": "LXZT00001", "company": "唐山", "benchmarkVal": null, "completionVal": null, "score": "7", "suggestScoreTotal": null, "leaderScore": null, "informantNumber": "LXZT000016", "itemLevel": "/三级物流体系、“网点+站点”", "children": [ { "id": "8837445452400758784", "parentId": "8837445451129884672", "performanceRecordId": "8837445334637285376", "formIndicatorBlockId": "8837445391839203328", "scoreVal": null, "empNumber": "LXZT00001", "company": "唐山", "benchmarkVal": null, "completionVal": null, "score": "5", "suggestScoreTotal": null, "leaderScore": null, "informantNumber": "LXZT000015", "itemLevel": "/三级物流体系、“网点+站点”/三级物流体系", "children": null, "leaderMarkScoreList": null, "isShowLeaderMarkScore": null, "isCanLeaderMarkScore": null, "isCanScore": null, "label": "三级物流体系" }, { "id": "8837445454976061440", "parentId": "8837445451129884672", "performanceRecordId": "8837445334637285376", "formIndicatorBlockId": "8837445391839203328", "scoreVal": null, "empNumber": "LXZT00001", "company": "唐山", "benchmarkVal": null, "completionVal": null, "score": "2", "suggestScoreTotal": null, "leaderScore": null, "informantNumber": "LXZT000016", "itemLevel": "/三级物流体系、“网点+站点”/“网点+站点”", "children": null, "leaderMarkScoreList": null, "isShowLeaderMarkScore": null, "isCanLeaderMarkScore": null, "isCanScore": null, "label": "“网点+站点”" } ], "leaderMarkScoreList": null, "isShowLeaderMarkScore": true, "isCanLeaderMarkScore": null, "isCanScore": false, "label": "三级物流体系、“网点+站点”" } ], "score": "20", "label": "重点任务指标" } ] }, { "id": "8837445336914792448", "empNumber": "LXZT00001", "company": "唐山", "evalFormIndicatorBlocks": [ { "id": "8837445339947274240", "performanceRecordId": "8837445334637285376", "sectionType": "quality", "children": [ { "id": "8837445434885345280", "parentId": null, "performanceRecordId": "8837445334637285376", "formIndicatorBlockId": "8837445339947274240", "scoreVal": null, "empNumber": "LXZT00001", "company": "唐山", "benchmarkVal": null, "completionVal": null, "score": "80", "suggestScoreTotal": null, "leaderScore": null, "informantNumber": "LXZT00008", "itemLevel": "/战略绩效得分", "children": null, "leaderMarkScoreList": null, "isShowLeaderMarkScore": null, "isCanLeaderMarkScore": null, "isCanScore": null, "label": "战略绩效得分" } ], "score": "80", "label": "战略绩效指标" }, { "id": "8837445391839203328", "performanceRecordId": "8837445334637285376", "sectionType": "quantity", "children": [ { "id": "8837445436214939648", "parentId": null, "performanceRecordId": "8837445334637285376", "formIndicatorBlockId": "8837445391839203328", "scoreVal": null, "empNumber": "LXZT00001", "company": "唐山", "benchmarkVal": null, "completionVal": null, "score": "6", "suggestScoreTotal": null, "leaderScore": null, "informantNumber": "LXZT00006", "itemLevel": "/“两集中”改革", "children": [ { "id": "8837445437431287808", "parentId": "8837445436214939648", "performanceRecordId": "8837445334637285376", "formIndicatorBlockId": "8837445391839203328", "scoreVal": null, "empNumber": "LXZT00001", "company": "唐山", "benchmarkVal": null, "completionVal": null, "score": "3", "suggestScoreTotal": null, "leaderScore": null, "informantNumber": "LXZT00006", "itemLevel": "/“两集中”改革/组织管理架构和质量指标体系建设情况", "children": null, "leaderMarkScoreList": null, "isShowLeaderMarkScore": null, "isCanLeaderMarkScore": null, "isCanScore": null, "label": "组织管理架构和质量指标体系建设情况" }, { "id": "8837445440002396160", "parentId": "8837445436214939648", "performanceRecordId": "8837445334637285376", "formIndicatorBlockId": "8837445391839203328", "scoreVal": null, "empNumber": "LXZT00001", "company": "唐山", "benchmarkVal": null, "completionVal": null, "score": "3", "suggestScoreTotal": null, "leaderScore": null, "informantNumber": "LXZT00006", "itemLevel": "/“两集中”改革/处理中心人均处理效率", "children": null, "leaderMarkScoreList": null, "isShowLeaderMarkScore": null, "isCanLeaderMarkScore": null, "isCanScore": null, "label": "处理中心人均处理效率" } ], "leaderMarkScoreList": null, "isShowLeaderMarkScore": null, "isCanLeaderMarkScore": null, "isCanScore": false, "label": "“两集中”改革" }, { "id": "8837445442326040576", "parentId": null, "performanceRecordId": "8837445334637285376", "formIndicatorBlockId": "8837445391839203328", "scoreVal": null, "empNumber": "LXZT00001", "company": "唐山", "benchmarkVal": null, "completionVal": null, "score": "7", "suggestScoreTotal": null, "leaderScore": null, "informantNumber": "LXZT00007", "itemLevel": "/协同与服务乡村振兴", "children": [ { "id": "8837445443424948224", "parentId": "8837445442326040576", "performanceRecordId": "8837445334637285376", "formIndicatorBlockId": "8837445391839203328", "scoreVal": null, "empNumber": "LXZT00001", "company": "唐山", "benchmarkVal": null, "completionVal": null, "score": "3", "suggestScoreTotal": null, "leaderScore": null, "informantNumber": "LXZT00006", "itemLevel": "/协同与服务乡村振兴/服务乡村振兴重点指标完成情况", "children": null, "leaderMarkScoreList": null, "isShowLeaderMarkScore": null, "isCanLeaderMarkScore": null, "isCanScore": null, "label": "服务乡村振兴重点指标完成情况" }, { "id": "8837445445991862272", "parentId": "8837445442326040576", "performanceRecordId": "8837445334637285376", "formIndicatorBlockId": "8837445391839203328", "scoreVal": null, "empNumber": "LXZT00001", "company": "唐山", "benchmarkVal": null, "completionVal": null, "score": "2", "suggestScoreTotal": null, "leaderScore": null, "informantNumber": "LXZT00007", "itemLevel": "/协同与服务乡村振兴/协同项目重点目标完成情况", "children": null, "leaderMarkScoreList": null, "isShowLeaderMarkScore": null, "isCanLeaderMarkScore": null, "isCanScore": null, "label": "协同项目重点目标完成情况" }, { "id": "8837445448374226944", "parentId": "8837445442326040576", "performanceRecordId": "8837445334637285376", "formIndicatorBlockId": "8837445391839203328", "scoreVal": null, "empNumber": "LXZT00001", "company": "唐山", "benchmarkVal": null, "completionVal": null, "score": "2", "suggestScoreTotal": null, "leaderScore": null, "informantNumber": "LXZT00007", "itemLevel": "/协同与服务乡村振兴/营销体系建设落实情况", "children": null, "leaderMarkScoreList": null, "isShowLeaderMarkScore": null, "isCanLeaderMarkScore": null, "isCanScore": null, "label": "营销体系建设落实情况" } ], "leaderMarkScoreList": null, "isShowLeaderMarkScore": null, "isCanLeaderMarkScore": null, "isCanScore": false, "label": "协同与服务乡村振兴" }, { "id": "8837445451129884672", "parentId": null, "performanceRecordId": "8837445334637285376", "formIndicatorBlockId": "8837445391839203328", "scoreVal": null, "empNumber": "LXZT00001", "company": "唐山", "benchmarkVal": null, "completionVal": null, "score": "7", "suggestScoreTotal": null, "leaderScore": null, "informantNumber": "LXZT000016", "itemLevel": "/三级物流体系、“网点+站点”", "children": [ { "id": "8837445452400758784", "parentId": "8837445451129884672", "performanceRecordId": "8837445334637285376", "formIndicatorBlockId": "8837445391839203328", "scoreVal": null, "empNumber": "LXZT00001", "company": "唐山", "benchmarkVal": null, "completionVal": null, "score": "5", "suggestScoreTotal": null, "leaderScore": null, "informantNumber": "LXZT000015", "itemLevel": "/三级物流体系、“网点+站点”/三级物流体系", "children": null, "leaderMarkScoreList": null, "isShowLeaderMarkScore": null, "isCanLeaderMarkScore": null, "isCanScore": null, "label": "三级物流体系" }, { "id": "8837445454976061440", "parentId": "8837445451129884672", "performanceRecordId": "8837445334637285376", "formIndicatorBlockId": "8837445391839203328", "scoreVal": null, "empNumber": "LXZT00001", "company": "唐山", "benchmarkVal": null, "completionVal": null, "score": "2", "suggestScoreTotal": null, "leaderScore": null, "informantNumber": "LXZT000016", "itemLevel": "/三级物流体系、“网点+站点”/“网点+站点”", "children": null, "leaderMarkScoreList": null, "isShowLeaderMarkScore": null, "isCanLeaderMarkScore": null, "isCanScore": null, "label": "“网点+站点”" } ], "leaderMarkScoreList": null, "isShowLeaderMarkScore": null, "isCanLeaderMarkScore": null, "isCanScore": false, "label": "三级物流体系、“网点+站点”" } ], "score": "20", "label": "重点任务指标" } ] } ] }
DynamicTable.vue
n<template>
<div>
<el-table :data="tableData" border :height="height">
<template v-for="(item) in tableHeader">
<table-column v-if="item.children && item.children.length" :key="item.id" :coloumn-header="item" :flowParams="flowParams"></table-column>
<el-table-column v-else :key="item.id" :label="item.label" :prop="item.prop" align="center">
</el-table-column>
</template>
</el-table>
</div>
</template>
<script>
import TableColumn from './TableColumn'
export default {
props: {
tableTitle: {
type: String,
require: true
},
// 表格的数据
tableData: {
type: Array,
required: true
},
// 多级表头的数据
tableHeader: {
type: Array,
required: true
},
// 表格的高度
height: {
type: String,
// default: '300'
},
// 流程数据
flowParams: {
type: Object,
default: ()=>{ return {} }
}
},
data () {
return {
}
},
watch: {
},
components: {
TableColumn
},
methods: {
}
}
</script>
<style scoped>
</style>TableColumn.vue
<template>
<el-table-column :label="`${coloumnHeader.label}(${coloumnHeader.score}分)`" :prop="coloumnHeader.label" align="center">
<template v-for="item in coloumnHeader.children">
<tableColumn v-if="item.children && item.children.length" :key="item.id" :coloumn-header="item" :flowParams="flowParams"></tableColumn>
<el-table-column v-else :key="item.label" :label="item.label" :prop="item.prop" align="center">
<template slot-scope="{row}">
<template v-if="item.type">
{{getScope1(item, row)}}
</template>
<template v-else>
<!-- isCanLeaderMarkScore为true领导可编辑 isCanScore 固定三项可编辑 已办不可编辑 -->
<el-input v-model="row.value[item.valueData][item.prop]" @input="handleIpt(row.value, item)" :title="row.value[item.valueData][item.prop]" :disabled="(flowParams && flowParams.isView === 'true') || (item.prop === 'leaderScore' ? !row.value[item.valueData].isCanLeaderMarkScore : !row.value[item.valueData].isCanScore)"></el-input>
</template>
</template>
</el-table-column>
</template>
</el-table-column>
</template>
;
<script>
export default {
name: 'tableColumn',
props: {
coloumnHeader: {
type: Object,
required: true
},
// 流程数据
flowParams: {
type: Object,
default: ()=>{ return {} }
}
},
methods: {
handleIpt(value, item) {
console.log('进来了。。。')
if (item.prop === 'scoreVal' && value[item.valueData].score && value[item.valueData][item.prop]) {
value[item.valueData][item.prop] = this.isNumber(value[item.valueData][item.prop])
if (Number(value[item.valueData][item.prop]) > Number(value[item.valueData].score)) {
this.$message({ type: "onfo", message: `建议得分不能超出设定的分值（${Number(value[item.valueData].score)}分） `});
value[item.valueData][item.prop] = ''
}
}
},
isNumber(num, decimalPlace) {
num = num.replace(/[^\d\.]+/g, "");
var len1 = num.substr(0, 1);
var len2 = num.substr(1, 1);
//如果第一位是0，第二位不是点，就用数字把点替换掉
if (num.length > 1 && len1 == 0 && len2 != ".") {
num = num.substr(1, 1);
}
//第一位不能是.
if (len1 == ".") {
num = "";
}
//限制只能输入一个小数点
if (num.indexOf(".") != -1) {
var str_ = num.substr(num.indexOf(".") + 1);
if (str_.indexOf(".") != -1) {
num = num.substr(0, num.indexOf(".") + str_.indexOf(".") + 1);
}
}
//动态位数
num = num.replace(
/\.\d{2,}$/,
num.substr(num.indexOf("."), decimalPlace + 1)
);
return num;
},
getScope1(item, row) {
let total = 0;
if (row.value[item.valueData].children && row.value[item.valueData].children) {
row.value[item.valueData].children.forEach((item) => {
total = total + Number(row.value[item.id].scoreVal || 0)
});
} else {
total = Number(row.value[item.valueData].scoreVal || 0);
}
console.log(total, 0)
row.value[item.valueData][item.prop] = total.toFixed(2);
return total.toFixed(2);
}
}
}
</script>
<style scoped>
</style>效果图
