elementUI表格树动态合并列问题处理（最终版，---新需求）

在之前的一篇博客中针对这个问题，写了解决方法。现在是加了新需求，发现之前的算法有一些不足之处，现在进行纠正。

目前表格的需求是：

评估人/评估分数/加减分说明，这个组合，根据评估人相同，就列合并；指标项目，评估人是为空的，这个组合都不合并；

处理人/处理分数/加减分说明，这个组合，是动态表头，有可能只有一个组合，也有可能有2个组合，也有可能是3个组合；处理人是全合并，处理分数/加减分说明是指标项目，不合并，非指标项目全合并。

实现的效果图如下：

具体实现代码如下：（这里是以弹窗为例的。也可以不写在弹窗中。）

<template><div style="height: 70%;"><el-row :gutter="20"><el-col :span="6"style="padding-top:5px;"><span>考核周期：<span>2019年11月考核</span></span></el-col><el-col :span="4"><span>姓名：<span>张三</span></span></el-col></el-row><el-row style="margin-top:20px;"><el-table :data="tableData1"ref="table"height="100%":span-method="objectSpanMethod":summary-method="getSummaries":show-summary="true"style="width: 100%;margin-bottom: 20px;"default-expand-allrow-key="id"@expand-change="expandChange"borderclass="showAll" size="small"><el-table-column width="200px"prop="objectName"label="名称"></el-table-column><el-table-column prop="workStatus"align="center"width="60px"label="状态"show-overflow-tooltip><template  slot-scope="scope"><span v-if="scope.row.workStatus=='1'">{{"提前"}}</span><span v-else-if="scope.row.workStatus=='2'">{{"正常"}}</span><span v-else-if="scope.row.workStatus=='3'">{{"滞后"}}</span><span v-else-if="scope.row.workStatus=='4'">{{"已完成"}}</span><span v-else-if="scope.row.workStatus=='5'">{{"暂停"}}</span><span v-else-if="scope.row.workStatus=='6'">{{"中止"}}</span><span v-else-if="scope.row.workStatus=='7'">{{"未启动"}}</span></template></el-table-column><el-table-column width="65px"prop="workProgress"align="center"label="进度(%)"></el-table-column><el-table-column width="45px"prop="timelong"align="center"label="工时"></el-table-column><el-table-column width="80px"prop="weight"align="center"label="权重(%)"></el-table-column><el-table-column width="80px"prop="selfRating"align="center"label="自评分"></el-table-column><el-table-column prop="selfDiffScoreDescribe"width="150px"label="加减分说明"></el-table-column><el-table-column prop="remarks"width="350px"label="工作内容"></el-table-column><el-table-column prop="name"label="评估人"></el-table-column><el-table-column prop="kpiScore"label="评估分数"></el-table-column><el-table-column prop="assesseDiffScoreDescribe"label="加减分说明"width="300"></el-table-column><el-table-column v-for="(item,index) in columns":key="index":label="item.label":prop="item.value":width="item.width"></el-table-column></el-table></el-row></div>
</template><script>export default {name: 'table-col',props: {// 弹窗是否打开visible: {type: Boolean,required: false,default: false},// 打开弹窗传递的idrowID: {type: String,required: false,default: ''}},created () {},data () {return {allRowNum:0, // 所有项目的行数spanArrSum:0, //非指标项目的行数spanArrFirstSum:0, //首次进入非指标项目的行数spanArrSumArr:[], // 处理分数、加减分说明等col合并数组allRowNumArr:[], // 处理人col合并数组spanArr: [], // 表格动态变化过程中的col合并数组objectListTable: [], // 非指标项目集合// 处理人数据集合handlerInfoList: [{approverDiffScoreDescribe1: null,approverName1: "张三",level1: 0,score1: 100},{ approverDiffScoreDescribe1: null, approverName1: '谌小仲', level1: 0, score1: 100 },{ approverDiffScoreDescribe1: null, approverName1: '王五', level1: 0, score1: 100 },],tableData1: [], // 表格数据};},watch: {visible: {handler(n) {if (n) {this.objectListTable = [] // 非指标项目集合this.columns= [] // 动态表头this.tableData1 = [] // 表格数据绑定this.spanArrSum = 0; // 非指标项目的行数this.spanArrFirstSum = 0; // //首次进入非指标项目的行数this.allRowNum = 0  //所有项目的行数this.tableData1 = this.tableData  // 请求回来的数据赋值给this.tableData1// 为表格中的数据都增加一个show字段，用于判断树是否显示this.tableData1.forEach((item, index) => {item.show = trueif(item.children){this.allRowNum += (item.children.length+1)}if(item.isFixed == false){this.objectListTable.push(item)}})let arrObject = []this.objectListTable.forEach((item, index) => {arrObject.push(item)if (item.children ) {this.spanArrSum += (item.children.length+1)this.spanArrFirstSum += (item.children.length+1)item.children.forEach((it, index) => {arrObject.push(it)})}})// 调用表格数据合并的计算方法this.setdates(arrObject)this.handlerInfoList.forEach((item,index) => {console.log(item,'item1111111')var approverName = 'approverName' + (index + 1);var score = 'score' + (index + 1);var approverDiffScoreDescribe = 'approverDiffScoreDescribe' + (index + 1)this.columns.push({ label: '处理人', value: approverName, width: '100px' })this.columns.push({ label: '处理分数', value: score, width: '100px' })this.columns.push({ label: '加减分说明', value: approverDiffScoreDescribe, width: '100px' })})}},deep: true,immediate: true},},methods: {/** elementUI表格绑定的合并方法 */objectSpanMethod ({ row, column, rowIndex, columnIndex }) {if (columnIndex === 8 || columnIndex === 9 || columnIndex === 10) {let _row = this.spanArr[rowIndex]if (rowIndex < this.spanArrFirstSum) {if (_row) {return {rowspan: _row == 99 ? 0 : _row,colspan: _row==99 ?0:1}} else {return {rowspan: 0,colspan: 0}}}else{return {rowspan: 1,colspan: 1}}}else if (columnIndex === 11 || columnIndex === 14 || columnIndex === 17) {let row2 = this.allRowNumArr[rowIndex]return {rowspan: row2,colspan: 1}}else if ((columnIndex === 12 || columnIndex === 13 || columnIndex === 15 ||columnIndex === 16 || columnIndex === 18 || columnIndex === 19)) {if (rowIndex < this.spanArrFirstSum) {let _row1 = this.spanArrSumArr[rowIndex]// console.log(_row1,'ffffffffff_row1')return {rowspan: _row1,colspan: 1}} else{return {rowspan: 1,colspan: 1}}}},/**  合计方法 */getSummaries (param) {const { columns, data } = param;const sums = [];columns.forEach((column, index) => {if (index === 0) {sums[index] = '合计';return;}let values = []data.map(item => {values.push(Number(item[column.property]))if (item.children) {item.children.map(it => {values.push(Number(it[column.property]))})}});if (!values.every(value => isNaN(value))) {sums[index] = values.reduce((prev, curr) => {const value = Number(curr);if (!isNaN(value)) {return prev + curr;} else {return prev;}}, 0);sums[index] += 0;} else {// sums[index] = '';// sums[index].toString()}});for (var i = 0; i < sums.length; i++) {if (i === 5 || i === 4 || i === 0) {sums[i] = sums[i]} else {sums[i] = ''}}return sums;},/** 表格中树展开或关闭触发事件 */expandChange (row, expandedRows) {let arrObject = [] // 接收表格中树数据的转化this.spanArr = [] // 合并表格行数rowspan数据集合this.objectListTable.forEach((item, index) => { // objectListTable是排除不合并表格数据的集合// show字段主要是用来区分当前表格中哪些树是展开的if (row.id === item.id) {// 如果是当前点击的行，就将当前是否展开的属性赋值给show这个字段item.show = expandedRows}// 得到表格中需要合并数据的集合arrObject.push(item)// 如果字段show为true(树展开)if (item.show) {item.children.forEach((it, index) => {arrObject.push(it)})} else {// 节点是关闭状态  如果数据存在子节点if (item.children) {// 其他情况，push任意值进数组，但不能不pushitem.children.forEach((it, index) => {arrObject.push(22)})}}})// 获取上半部分需要合并的行数if (!row.isFixed) {if (row.show) {this.spanArrSum += row.children.length} else {this.spanArrSum -= row.children.length}}// 获取当前表格所呈现出来的所有行数，即处理人需要合并的行数if(expandedRows){this.allRowNum += row.children.length}else {this.allRowNum -= row.children.length}// 调用合并列数的方法  0 为不合并this.setdates(arrObject)},/** 合并列数的方法 */setdates: function (arr) {console.log(arr, '合并列数方法中拿到的数组')// 转化数组,得到name的集合，如果name不存在，代表需要隐藏，这时候用22这个数字进行代替var kpiObjArr = []for (var i = 0, len = arr.length; i < len; i++) {if (arr[i] == 22) {kpiObjArr.push(22)} else {kpiObjArr.push(arr[i].name)}}console.log(kpiObjArr, 'kpiObjArrkpiObjArrkpiObjArrkpiObjArr')this.spanArrSumArr = [] // 清空处理分数、加减分说明等col合并数组// 获取处理分数、加减分说明等col合并数组for(let i =0 ; i < this.spanArrSum ; i++){if(i===0){this.spanArrSumArr.push(this.spanArrSum)}else{this.spanArrSumArr.push(0)}}this.allRowNumArr = [] // 清空处理人col合并数组// 获取处理人col合并数组for(let i =0 ; i < this.allRowNum ; i++){if(i===0){this.allRowNumArr.push(this.allRowNum)}else{this.allRowNumArr.push(0)}}// 获取最终的col合并集合this.spanArr = this.arrFunction(kpiObjArr,0)},/** 数组数据处理方法 */arrFunction(list,index){var a=0;var reg = new RegExp("[\\D]");for (var i=index;i<list.length;i++){if( reg.test(list[i])){a=i;break;}}var s=index;for (var i=index+1;i<list.length;i++){s++; //记录终结点if(list[a]==list[i]){list[i]=0;}else if(reg.test(list[i])&&list[a]!=list[i]){break;}}var count=0;list[index] = 1for (var i = index + 1; i < list.length; i++) {if (list[i] ==0) {count++;list[i] = 22;list[index+count] = 0;list[index]=count+1;}if(list[i]==22){list[i] = 99;}}if(s<list.length-1){list=this.arrFunction(list,s);}return list;}}}
</script><style lang="scss" scoped>
</style>

代码到此就完成了。

其中需要注意的就是：row与col的合并，上面代码中，例入spanArr=[1,99,99,3,0,0] 99就代表row为0，col也为0，是被收起来的树节点的子节点，需要被隐藏掉；这种场景代表项目1为关闭，隐藏项目1下的子节点，项目2为打开，col需要合并为3，0，0，row都为1，0代表的是col此时不合并。

需要注意的第二点就是：当得到的人名组合为kpiObjArr=[a,22,22,b,b,b]，如何将这个数组变为[1,99,99,3,0,0]这样的格式，22上述代码中已写过备注，代表被收起来的子节点，需要被隐藏。【kpiObjArr的场景非常多，这里再说几个例子：

kpiObjArr=[a,22,22,a,a,a,b,b,b] --------------------------------------------------spanArr=[4,0,0,0,99,99,3,0,0]

kpiObjArr=[a,22,22,a,22,22,b,22,22]------------------------------------------------------spanArr=[2,0,99,99,99,99,1,99,99]

需要找到规律，来将这个数组进行转化成功，最后再表格自带的合并方法中进行渲染，

】

下面补充一下，后台返回的tableData的数据格式（数据多，所以没有写在上面进行定义）

// 后台返回的表格数据
tableData: [{id: '1191670059258875904',isFixed: false,approverName1: '张三',approverName2: '王五',approverName3: '李四',approverDiffScoreDescribe1: '',approverDiffScoreDescribe2: '',approverDiffScoreDescribe3: '',score1: 100,score2: 100,score3: 100,kpiScore: 99,name: "王五",num: 2,objectName: "项目1",remarks: null,selfRating: null,timelong: null,weight: null,workProgress: null,workStatus: null,assesseDiffScoreDescribe: 'null',children:[{id: "11916698122256666",name: "王五",objectName: "工作项1",remarks: "垃圾数据22019-11-05周报：已完成",selfDiffScoreDescribe: null,selfRating: 100,timelong: 8,weight: 100,workProgress: 100,workStatus: "4",approverName1: '',approverName2: '',approverName3: '',approverDiffScoreDescribe1: '',approverDiffScoreDescribe2: '',approverDiffScoreDescribe3: '',score1: null,score2: null,score3: null,},{id: "2222222333322999999",name: "王五",objectName: "工作项2",remarks: "垃圾数据22019-11-05周报：已完成",selfDiffScoreDescribe: null,selfRating: 100,timelong: 8,weight: 100,workProgress: 100,workStatus: "4",approverName1: '张三',approverName2: '王五',approverName3: '李四',approverDiffScoreDescribe1: '',approverDiffScoreDescribe2: '',approverDiffScoreDescribe3: '',score1: 100,score2: 100,score3: 100,}]},{id: '11916700592588759042',isFixed: false,approverName1: '张三',approverName2: '王五',approverName3: '李四',approverDiffScoreDescribe1: '',approverDiffScoreDescribe2: '',approverDiffScoreDescribe3: '',score1: 100,score2: 100,score3: 100,kpiScore: 88,name: "王五",num: 2,objectName: "项目2",remarks: null,selfRating: null,timelong: null,weight: null,workProgress: null,workStatus: null,assesseDiffScoreDescribe: 'null333',children:[{id: "119166981222566662",name: "王五",objectName: "工作项1",remarks: "垃圾数据22019-11-05周报：已完成",selfDiffScoreDescribe: null,selfRating: 100,timelong: 8,weight: 100,workProgress: 100,workStatus: "4",approverName1: '',approverName2: '',approverName3: '',approverDiffScoreDescribe1: '',approverDiffScoreDescribe2: '',approverDiffScoreDescribe3: '',score1: null,score2: null,score3: null,},{id: "22222223333229999992",name: "王五",objectName: "工作项2",remarks: "垃圾数据22019-11-05周报：已完成",selfDiffScoreDescribe: null,selfRating: 100,timelong: 8,weight: 100,workProgress: 100,workStatus: "4",approverName1: '张三',approverName2: '王五',approverName3: '李四',approverDiffScoreDescribe1: '',approverDiffScoreDescribe2: '',approverDiffScoreDescribe3: '',score1: 100,score2: 100,score3: 100,},{id: "00000000002",name: "王五",objectName: "工作项3",remarks: "垃圾数据22019-11-05周报：已完成",selfDiffScoreDescribe: null,selfRating: 100,timelong: 8,weight: 100,workProgress: 100,workStatus: "4",approverName1: '张三',approverName2: '王五',approverName3: '李四',approverDiffScoreDescribe1: '',approverDiffScoreDescribe2: '',approverDiffScoreDescribe3: '',score1: 100,score2: 100,score3: 100,}]},{id: '11916700592588759042a',isFixed: false,approverName1: '张三',approverName2: '王五',approverName3: '李四',approverDiffScoreDescribe1: '',approverDiffScoreDescribe2: '',approverDiffScoreDescribe3: '',score1: 100,score2: 100,score3: 100,kpiScore: 100,name: "aaa兰",num: 2,objectName: "项目3",remarks: null,selfRating: null,timelong: null,weight: null,workProgress: null,workStatus: null,assesseDiffScoreDescribe: null,children:[{id: "119166981222566662a",name: "aaa兰",objectName: "工作项1",remarks: "垃圾数据22019-11-05周报：已完成",selfDiffScoreDescribe: null,selfRating: 100,timelong: 8,weight: 100,workProgress: 100,workStatus: "4",approverName1: '',approverName2: '',approverName3: '',approverDiffScoreDescribe1: '',approverDiffScoreDescribe2: '',approverDiffScoreDescribe3: '',score1: null,score2: null,score3: null,},{id: "00000000002a",name: "aaa兰",objectName: "工作项2",remarks: "垃圾数据22019-11-05周报：已完成",selfDiffScoreDescribe: null,selfRating: 100,timelong: 8,weight: 100,workProgress: 100,workStatus: "4",approverName1: '张三',approverName2: '王五',approverName3: '李四',approverDiffScoreDescribe1: '',approverDiffScoreDescribe2: '',approverDiffScoreDescribe3: '',score1: 100,score2: 100,score3: 100,}]},{id: '9',isFixed: true,approverName1: '',approverName2: '',approverName3: '',approverDiffScoreDescribe1: '',approverDiffScoreDescribe2: '',approverDiffScoreDescribe3: '',score1: null,score2: null,score3: null,kpiScore: '',name: "",num: 2,objectName: "指标项目1",remarks: null,selfRating: null,timelong: null,weight: null,workProgress: null,workStatus: null,assesseDiffScoreDescribe: null,children:[{id: "99",approverName1: '张三',approverName2: '王五',approverName3: '李四',approverDiffScoreDescribe1: '',approverDiffScoreDescribe2: '',approverDiffScoreDescribe3: '',score1: 50,score2: 40,score3: 60,name: "",objectName: "指标1",remarks: "垃圾数据22019-11-05周报：已完成",selfDiffScoreDescribe: null,selfRating: 100,timelong: 8,weight: 100,workProgress: 100,workStatus: "4",kpiScore: '',},{id: "999",approverName1: '张三',approverName2: '王五',approverName3: '李四',approverDiffScoreDescribe1: '',approverDiffScoreDescribe2: '',approverDiffScoreDescribe3: '',score1: 101,score2: 102,score3: 103,name: "",objectName: "指标2",remarks: "垃圾数据22019-11-05周报：已完成",selfDiffScoreDescribe: null,selfRating: 100,timelong: 8,weight: 100,workProgress: 100,workStatus: "4",kpiScore: '',}]},{id: '91',isFixed: true,approverName1: '',approverName2: '',approverName3: '',approverDiffScoreDescribe1: '',approverDiffScoreDescribe2: '',approverDiffScoreDescribe3: '',score1: null,score2: null,score3: null,kpiScore: '',name: "",num: 2,objectName: "指标项目2",remarks: null,selfRating: null,timelong: null,weight: null,workProgress: null,workStatus: null,assesseDiffScoreDescribe: null,children:[{id: "991",approverName1: '张三',approverName2: '王五',approverName3: '李四',approverDiffScoreDescribe1: '',approverDiffScoreDescribe2: '',approverDiffScoreDescribe3: '',score1: 50,score2: 40,score3: 60,name: "",objectName: "指标项1",remarks: "垃圾数据22019-11-05周报：已完成",selfDiffScoreDescribe: null,selfRating: 100,timelong: 8,weight: 100,workProgress: 100,workStatus: "4",kpiScore: '',},{id: "9991",approverName1: '张三',approverName2: '王五',approverName3: '李四',approverDiffScoreDescribe1: '',approverDiffScoreDescribe2: '',approverDiffScoreDescribe3: '',score1: 101,score2: 102,score3: 103,name: "",objectName: "指标项2",remarks: "垃圾数据22019-11-05周报：已完成",selfDiffScoreDescribe: null,selfRating: 100,timelong: 8,weight: 100,workProgress: 100,workStatus: "4",kpiScore: '',}]},
],

elementUI表格树动态合并列问题处理（最终版，---新需求）相关推荐

使用easyexcel动态合并列导出
前言项目中遇到需要导出excel,并且动态合并指定列,设计表头样式的需求.项目框架一开始用的是easypoi,它对于导出格式简单的excel和word都非常友好,但是对于复杂的excel格式,就显得 ...
elementui表格组件动态合并单元格
直接按照elementui表格组件给的合并单元格的方式,是写死的,不能满足动态合并的需求.一般都是自己总结合并规律,最后通过span-method方法返回的行列进行合并. 重点::span-metho ...
element-ui 表格树数据显示
1.使用表格树,element-ui比较新的版本开始支持,最新的版本却在报错,不识别树结构的几个属性 <script src="https://cdn.bootcss.com/elem ...
数据结构c语言版胡学刚答案,哈夫曼树的建立与实现（最终版）最新版
<哈夫曼树的建立与实现.doc>由会员分享,可免费在线阅读全文,更多与<哈夫曼树的建立与实现(最终版)>相关文档资源请在帮帮文库(www.woc88.com)数亿文档库存里搜索 ...
elementUI表格中动态单元格合并
关于动态单元格合并,官方文档提供的方法仅可实现相邻的两行数据合并,这里博主分享一下多行相同的数据也可以合并结构代码 <el-table:span-method="objectSpan ...
【vex-table】复杂表格同时存在合并列与合并行
https://xuliangzhan_admin.gitee.io/vxe-table/#/table/advanced/popupEdit //vxe官方文档 <template>&l ...
ElementUI表格的动态渲染
场景表头不固定,根据后端返回的对象数组取key值为表头,value为行值. 实现 tableLookData为渲染数据,tableLookHeader为表头. <el-table:data=& ...
国内外镜像下载合集（详细最终版）
当下分享使用最多的镜像下载资源网站. Python 来自国内---华为:蟒蛇本地索引 (huaweicloud.com) MySQL 来自中国科技技术大学:Index of /mysql-ftp/Do ...
[vue-element] ElementUI表格组件如何实现动态表头？
[vue-element] ElementUI表格组件如何实现动态表头? <template v-for="item in tableColownms"> <el ...

elementUI表格树动态合并列问题处理（最终版，---新需求）

elementUI表格树动态合并列问题处理（最终版，---新需求）相关推荐

最新文章

热门文章