需求：表格的表头，需要动态改变
效果图
方法
动态改变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;
})
},
版权声明：本文为weixin_46328144原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。