Ant Design of Vue —— Table表格组件 —— 设置动态表头

浅浅的花香味﹌ 2022-10-22 09:10 43阅读 0赞

# 需求：表格的表头，需要动态改变 #

# 效果图 #

![在这里插入图片描述][2021032613303349.gif_pic_center]

## 方法 ##

动态改变columns ，通过push改变

## 关键代码 ##

data

// 表头
    columns: [
     // { 
    	// title: '指标名称 ',
    	// align: "center",
    	// key: 'PitemName',
    	// dataIndex: 'PitemName',
    	// ellipsis: true,
    	// width: '200px',
    	// },
    	{ 
    		title: '计算依据 ',
    		align: "center",
    		key: 'itemName',
    		dataIndex: 'itemName',
    		ellipsis: true,
    		width: '300px',
    	},
    
    ],
    findTF: false,
    findTF2: false,
    findTF3: false,
    findTF4: false,

methods

find(arr, str) { 
      this.findTF = false;
      arr.forEach(item => { 
        if (item.title == str) { 
          return this.findTF = true;
        }
      })
    },
    find2(arr, str) { 
      this.findTF2 = false;
      arr.forEach(item => { 
        if (item.title == str) { 
          return this.findTF2 = true;
        }
      })
    },
    find3(arr, str) { 
      this.findTF3 = false;
      arr.forEach(item => { 
        if (item.title == str) { 
          return this.findTF3 = true;
        }
      })
    },
    find4(arr, str, str2) { 
      this.findTF4 = false;
      arr.forEach(item => { 
        if (item.title == str) { 
          item.children.forEach(i => { 
            if (i.title == str2) { 
              return this.findTF4 = true;
            }
          })
        }
      })
    },
    
    // // 查询
    searchForm() { 
    	// 第二次搜索初始化
    	this.columns = [
      // { 
    		// title: '指标名称 ',
    		// align: "center",
    		// dataIndex: 'PitemName',
    		// key: 'PitemName',
    		// ellipsis: true,
    		// width: '200px',
    		// },
    		{ 
    			title: '计算依据 ',
    			align: "center",
    			dataIndex: 'itemName',
    			key: 'itemName',
    			ellipsis: true,
    			width: '200px',
    		},
    
    	];
    	var Columns = this.columns;
    	var params = this.getQueryParams();
    	// this.loading = true;
    	getAction(this.url.forSelect, params).then((res) => { 
    		if (res.success) { 
    			var result = res.result.sort((a, b) => { 
    				return a.yearNo - b.yearNo
    			})
    			if (result.length > 0) { 
    				// queryParam 搜索的数据
    				var queryParam = {  ...this.queryParam
    				}; ///没用到
               console.log(result,"result")
    				// 依据年份做循环
    				result.forEach((itemY) => { 
    					// 判断 年份是否已存在
    					// console.log(itemY, "itemY")
    					this.find(Columns, itemY.yearNo + '年');
    					// console.log(this.findTF, "find");
    					if (this.findTF == false) { 
    						// 年份不存在 加年份
    						Columns.push({ 
    							title: itemY.yearNo + '年',
    							align: "center",
    							children: [
                          // { 
                          // title: '集团总值',
                          // align: "center",
                          // width: '120px',
                          // dataIndex: 'Y' + itemY.yearNo,
                          // key: 'Y' + itemY.yearNo,
                          // }, 
                        ]
    						}, )
                   // 加企业 //判断企业是否存在
                   // console.log(Columns,"Columns")
                   var QYColumns = Columns.pop();
                   // console.log(QYColumns, "QYColumns")
                   this.find2(QYColumns.children, itemY.enterpriseName);
                   // console.log(this.findTF2,"findTF2")
                   if (this.findTF2 == false) { 
                     // 企业不存在 加企业
                     QYColumns.children.push({ 
                     	title: itemY.enterpriseName,
                     	align: "center",
                     	children: [
                            // { 
                            // title: "企业总值",
                            // align: "center",
                            // width: '120px',
                            // dataIndex: 'Y' + itemY.yearNo + itemY.enterpriseId,
                            // key: 'Y' + itemY.yearNo + itemY.enterpriseId,
                            // }, 
                          ]
                     })
                     // 再加船型 //判断船型是否存在
                     var proColumns = QYColumns.children.pop();
                     this.find3(proColumns.children, itemY.shipTypeName);
                     // console.log(this.findTF3, "findTF3")
                     if(this.findTF3 == false){ 
                       // 船型不存在
                       proColumns.children.push({ 
                       	title: itemY.shipTypeName,
                       	align: "center",
                       	children: [
                              // { 
                              // title: itemY.shipTypeName + "总值",
                              // align: "center",
                              // width: '120px',
                              // dataIndex: 'Y' + itemY.yearNo + itemY.enterpriseId + itemY.shipTypeCode,
                              // key: 'Y' + itemY.yearNo + itemY.enterpriseId + itemY.shipTypeCode,
                              // },
                             ]
                       }) 
                      //判断船是否存在 不存在 // 再加具体船 
                       this.find4(proColumns.children, itemY.shipTypeName, itemY.projNo);
                       if (this.findTF4 == false) { 
                       	var shipColumns = proColumns.children.pop();
                       	shipColumns.children.push({ 
                       		title: itemY.projNo,
                       		align: "center",
                       		width: '120px',
                       		dataIndex: itemY.projNo,
                       		key: itemY.projNo,
                       	})
                       	proColumns.children.push(shipColumns);
                         // console.log(proColumns,"proColumns船型已存在")
                       }
                     }else{ 
                       // 船型已存在 -- 找到具体船 加船 
                       this.find4(proColumns.children, itemY.shipTypeName, itemY.projNo);
                       if (this.findTF4 == false) { 
                         for(let i=0 ;i<proColumns.children.length;i++){ 
                           if(proColumns.children[i]==itemY.shipTypeName){ 
                             // 匹配的对应船型
                             var shipColumns = proColumns.children[i];
                             shipColumns.children.push({ 
                             	title: itemY.projNo,
                             	align: "center",
                             	width: '120px',
                             	key: itemY.projNo,
                             	dataIndex: itemY.projNo,
                             })
                             proColumns.children.splice(i,1,shipColumns)
                           }
                         }
                       }
                     }
                     QYColumns.children.push(proColumns)
                   }
                   else{ 
                     // 企业存在 -- 找到对应企业
                     // console.log(QYColumns,"企业存在")
                   }
                   Columns.push(QYColumns);
    					} else{ 
                   // 年份已存在
                   // console.log(Columns,"年份已存在")
                   for (let i = 0; i < Columns.length; i++) { 
                     if (Columns[i].title == itemY.yearNo + '年') { 
                       // 匹配对应年份
                       //判断企业是否存在 // 不存在 加企业 
                       // console.log(Columns,"Columns")
                       var QYColumns = Columns.pop();
                       // console.log(QYColumns, "QYColumns")
                       this.find2(QYColumns.children, itemY.enterpriseName);
                       // console.log(this.findTF2,"findTF2")
                       if (this.findTF2 == false) { 
                         // 企业不存在 加企业
                         QYColumns.children.push({ 
                         	title: itemY.enterpriseName,
                         	align: "center",
                         	children: [
                                // { 
                                // title: "企业总值",
                                // align: "center",
                                // width: '120px',
                                // dataIndex: 'Y' + itemY.yearNo + itemY.enterpriseId,
                                // key: 'Y' + itemY.yearNo + itemY.enterpriseId,
                                // }, 
                              ]
                         })
                         // 再加船型 //判断船型是否存在
                         var proColumns = QYColumns.children.pop();
                         this.find3(proColumns.children, itemY.shipTypeName);
                         // console.log(this.findTF3, "findTF3")
                         if(this.findTF3 == false){ 
                           // 船型不存在
                           proColumns.children.push({ 
                           	title: itemY.shipTypeName,
                           	align: "center",
                           	children: [
                                  // { 
                                  // title: itemY.shipTypeName + "总值",
                                  // align: "center",
                                  // width: '120px',
                                  // dataIndex: 'Y' + itemY.yearNo + itemY.enterpriseId + itemY.shipTypeCode,
                                  // key: 'Y' + itemY.yearNo + itemY.enterpriseId + itemY.shipTypeCode,
                                  // }, 
                                ]
                           }) 
                          //判断船是否存在 不存在 // 再加具体船 
                           this.find4(proColumns.children, itemY.shipTypeName, itemY.projNo);
                           if (this.findTF4 == false) { 
                           	var shipColumns = proColumns.children.pop();
                           	shipColumns.children.push({ 
                           		title: itemY.projNo,
                           		align: "center",
                           		width: '120px',
                           		dataIndex: itemY.projNo,
                           		key:  itemY.projNo,
                           	})
                           	proColumns.children.push(shipColumns);
                             // console.log(proColumns,"proColumns船型已存在")
                           }
                         }else{ 
                           // 船型已存在 -- 找到具体船行 加船 
                           this.find4(proColumns.children, itemY.shipTypeName, itemY.projNo);
                           if (this.findTF4 == false) { 
                             for(let i=0 ;i<proColumns.children.length;i++){ 
                               if(proColumns.children[i]==itemY.shipTypeName){ 
                                 // 匹配的对应船型
                                 var shipColumns = proColumns.children[i];
                                 shipColumns.children.push({ 
                                 	title: itemY.projNo,
                                 	align: "center",
                                 	width: '120px',
                                 	key: itemY.projNo,
                                 	dataIndex: itemY.projNo,
                                 })
                                 proColumns.children.splice(i,1,shipColumns)
                               }
                             }
                           }
                         }
                         QYColumns.children.push(proColumns)
                       }
                       else{ 
                         // 企业存在 -- 找到对应企业
                         // console.log(QYColumns,"企业存在")
                         // 再加船型 //判断船型是否存在
                         var proColumns = QYColumns.children.pop();
                         this.find3(proColumns.children, itemY.shipTypeName);
                         // console.log(this.findTF3, "findTF3")
                         if(this.findTF3 == false){ 
                           // 船型不存在
                           proColumns.children.push({ 
                           	title: itemY.shipTypeName,
                           	align: "center",
                           	children: [
                                  // { 
                                  // title: itemY.shipTypeName + "总值",
                                  // align: "center",
                                  // width: '120px',
                                  // dataIndex: 'Y' + itemY.yearNo + itemY.enterpriseId + itemY.shipTypeCode,
                                  // key: 'Y' + itemY.yearNo + itemY.enterpriseId + itemY.shipTypeCode,
                                  // }, 
                                ]
                           }) 
                          //判断船是否存在 不存在 // 再加具体船 
                           this.find4(proColumns.children, itemY.shipTypeName, itemY.projNo);
                           if (this.findTF4 == false) { 
                             // console.log("船不存在")
                           	var shipColumns = proColumns.children.pop();
                           	shipColumns.children.push({ 
                           		title: itemY.projNo,
                           		align: "center",
                           		width: '120px',
                           		dataIndex:itemY.projNo,
                           		key: itemY.projNo,
                           	})
                           	proColumns.children.push(shipColumns);
                           }
                         }else{ 
                           // 船型已存在 判断船是否存在 不存在 // 再加具体船 
                           // console.log(proColumns,"船型已存在")
                           this.find4(proColumns.children, itemY.shipTypeName, itemY.projNo);
                           if (this.findTF4 == false) { 
                             for(let i=0 ;i<proColumns.children.length;i++){ 
                               if(proColumns.children[i].title == itemY.shipTypeName){ 
                                 // 匹配的对应船型 -- 加船
                                 var shipColumns = proColumns.children[i];
                                 shipColumns.children.push({ 
                                 	title: itemY.projNo,
                                 	align: "center",
                                 	width: '120px',
                                 	key:itemY.projNo,
                                 	dataIndex: itemY.projNo,
                                 })
                                 proColumns.children.splice(i,1,shipColumns)
                                 // console.log(proColumns,"加船")
                               }
                             }
                           }
                         }
                         QYColumns.children.push(proColumns)
                       }
                       Columns.push(QYColumns);
                     }
                   }
                 }
                 
                 // 将添加过的表头赋值给data中columns
    					this.columns = Columns;
    				})
    
    			}
    
    		}
    		if (res.code === 510) { 
    			this.$message.warning(res.message)
    		}
    		this.loading = false;
    	})
    
    },

[2021032613303349.gif_pic_center]: /images/20221022/31001d687a1641f19609e4093abce7c2.png