<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<div>
<div class="preview app-container" ref="preview">
<el-table :data="tableData" height="900" :header-cell-style="handerMethod"
:span-method="objectSpanMethod" border fit highlight-current-row style="margin-top: 10px;"
row-key="id" lazy :load="load" :tree-props="{children:'children',hasChildren:'hasChildren'}"
@expand-change="expandChange">
<el-table-column prop='firstRisk' label='Level 1 Risk' align="center" type=""
:show-overflow-tooltip="true"></el-table-column>
<el-table-column prop='secRisk' label='Second-level risk' align="center" type=""
:show-overflow-tooltip="true"></el-table-column>
<el-table-column prop='' label='Early warning indicator' align="center" :show-overflow-tooltip="true">
<el-table-column label="" prop='earlyWarning' align="center">
</el-table-column>
</el-table-column>
<el-table-column prop='description' label='End of period' align="center"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column prop='status' label='quarter' align="center"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column prop='status' label='YoY increase or decrease rate' align="center"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column prop='status' label='Remarks' align="center"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column prop='status' label='Description' align="center"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column prop='ISstatus' label='Is it a risk' align="center"
:show-overflow-tooltip="true"></el-table-column>
<el-table-column prop='status' label='Monochrome increase or decrease rate' align="center"
:show-overflow-tooltip="true"></el-table-column>
</el-table>
</div>
</div>
</div>
</body>
<!-- import Vue before Element -->
<script src="//i2.wp.com/unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="//i2.wp.com/unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({<!-- -->
el: '#app',
data: function () {<!-- -->
return {<!-- -->
tableData: [
{<!-- -->
id: 1,
firstRisk: "Strategic Risk",
secRisk: "Macroeconomic Risk",
earlyWarning: "Domestic and foreign macroeconomics",
type: "domestic and foreign macroeconomics",
description: "-",
ISstatus: "Yes",
hasChildren: true,
children: [],
expandTrue: false,
},
{<!-- -->
id: 2,
firstRisk: "Strategic Risk",
secRisk: "Policy Risk",
earlyWarning: "Country and Industry",
type: "Country and Industry",
description: "-",
ISstatus: "Yes",
hasChildren: true,
children: [], expandTrue: false,
},
{<!-- -->
id: 3,
firstRisk: "Strategic Risk",
secRisk: "International Business Risk",
earlyWarning:
"Number of subsidiaries affected by tariff policy (number)",
type: "Number of subsidiaries affected by tariff policy (number)",
description: "-",
ISstatus: "Yes",
hasChildren: true,
children: [], expandTrue: false,
},
{<!-- -->
id: 4,
firstRisk: "Strategic Risk",
secRisk: "International Business Risk",
earlyWarning: "Total overseas assets in overseas medium and high risk areas 1",
type: "Amount (10,000 yuan)",
description: "-",
ISstatus: "Yes",
hasChildren: true,
children: [], expandTrue: false,
},
{<!-- -->
id: 5,
firstRisk: "Strategic Risk",
secRisk: "International Business Risk",
earlyWarning: "Total overseas assets in overseas medium and high risk areas 2",
type: "Proportion of total amount",
description: "-",
ISstatus: "Yes",
hasChildren: true,
children: [], expandTrue: false,
},
{<!-- -->
id: 6,
firstRisk: "Strategic Risk",
secRisk: "International Business Risk",
earlyWarning: "Overdue number of projects (number)",
type: "Overdue quantity of projects (units)",
description: "-",
ISstatus: "Yes",
hasChildren: true,
children: [], expandTrue: false,
},
{<!-- -->
id: 7,
firstRisk: "Strategic Risk",
secRisk: "International Business Risk",
earlyWarning: "Major Overseas Legal Litigation Case 1",
type: "Quantity (pieces)",
description: "-",
ISstatus: "Yes",
hasChildren: true,
children: [], expandTrue: false,
},
{<!-- -->
id: 8,
firstRisk: "Strategic Risk",
secRisk: "International Business Risk",
earlyWarning: "Major Overseas Legal Litigation Case 2",
type: "Amount involved (10,000 yuan)",
description: "-",
ISstatus: "Yes",
hasChildren: true,
children: [], expandTrue: false,
},
{<!-- -->
id: 9,
firstRisk: "Strategic Risk",
secRisk: "Technology Innovation Risk",
earlyWarning: "Scientific research investment 1",
type: "Amount (10,000 yuan)",
description: "-",
ISstatus: "Yes",
hasChildren: true,
children: [], expandTrue: false,
},
{<!-- -->
id: 10,
firstRisk: "Strategic Risk",
secRisk: "Technology Innovation Risk",
earlyWarning: "Scientific research investment 2",
type: "Proportion of total revenue",
description: "-",
ISstatus: "Yes",
hasChildren: true,
children: [], expandTrue: false,
},
],
oneNameArr: [],
oneNamePos: 0,
twoNameArr: [],
twoNamePos: 0,
}
}
, mounted() {<!-- -->
this.merage();
},
methods: {<!-- -->
expandChange(row, expand) {<!-- -->
console.log('row,expand----------------------', row, expand)
row.expandTrue = expand
this.merage()
},
load(tree, treeNode, resolve) {<!-- -->
let obj = {<!-- -->}
if (tree.earlyWarning == 'Domestic and foreign macroeconomics') {<!-- -->
obj = {<!-- -->
id: 11,
firstRisk: "Strategic Risk",
secRisk: "Macroeconomic Risk",
earlyWarning: "Domestic and foreign macroeconomics",
type: "domestic and foreign macroeconomics",
description: "-",
ISstatus: "Yes",
}
} else if (tree.earlyWarning == 'Country and Industry') {<!-- -->
obj =
{<!-- -->
id: 13,
firstRisk: "Strategic Risk",
secRisk: "Policy Risk",
earlyWarning: "Country and Industry",
type: "Country and Industry",
description: "-",
ISstatus: "Yes",
}
}
else if (tree.earlyWarning == 'Number of subsidiaries affected by tariff policy (number)') {<!-- -->
obj =
{<!-- -->
id: 14,
firstRisk: "Strategic Risk",
secRisk: "International Business Risk",
earlyWarning:
"Number of subsidiaries affected by tariff policy (number)",
type: "Number of subsidiaries affected by tariff policy (number)",
description: "-",
ISstatus: "Yes",
}
} else if (tree.earlyWarning == 'Total overseas assets in overseas medium and high risk areas 1') {<!-- -->
obj =
{<!-- -->
id: 15,
firstRisk: "Strategic Risk",
secRisk: "International Business Risk",
earlyWarning: "Total overseas assets in overseas medium and high risk areas 1",
type: "Amount (10,000 yuan)",
description: "-",
ISstatus: "Yes",
}
} else if (tree.earlyWarning == 'Total overseas assets in overseas medium and high risk areas 2') {<!-- -->
obj =
{<!-- -->
id: 16,
firstRisk: "Strategic Risk",
secRisk: "International Business Risk",
earlyWarning: "Total overseas assets in overseas medium and high risk areas 2",
type: "Proportion of total amount",
description: "-",
ISstatus: "Yes",
}
} else if (tree.earlyWarning == 'Number of items overdue (number)') {<!-- -->
obj =
{<!-- -->
id: 17,
firstRisk: "Strategic Risk",
secRisk: "International Business Risk",
earlyWarning: "Overdue number of projects (number)",
type: "Overdue quantity of projects (units)",
description: "-",
ISstatus: "Yes",
}
} else if (tree.earlyWarning == 'Major Overseas Legal Litigation Case 1') {<!-- -->
obj =
{<!-- -->
id: 18,
firstRisk: "Strategic Risk",
secRisk: "International Business Risk",
earlyWarning: "Major Overseas Legal Litigation Case 1",
type: "Quantity (pieces)",
description: "-",
ISstatus: "Yes",
}
} else if (tree.earlyWarning == 'Major Overseas Legal Litigation Case 2') {<!-- -->
obj =
{<!-- -->
id: 19,
firstRisk: "Strategic Risk",
secRisk: "International Business Risk",
earlyWarning: "Major Overseas Legal Litigation Case 2",
type: "Amount involved (10,000 yuan)",
description: "-",
ISstatus: "Yes",
}
} else if (tree.earlyWarning == 'Scientific research investment 1') {<!-- -->
obj =
{<!-- -->
id: 20,
firstRisk: "Strategic Risk",
secRisk: "Technology Innovation Risk",
earlyWarning: "Scientific research investment 1",
type: "Amount (10,000 yuan)",
description: "-",
ISstatus: "Yes",
}
}
let list = []
if (Object.keys(obj).length > 0) {<!-- -->
list = [obj]
} else {<!-- -->
list = []
}
tree.children = [...list]
resolve([...list])
},
//hide header
handerMethod({<!-- --> rowIndex }) {<!-- -->
// background: 'rgb(242, 242, 242)';
if (rowIndex === 1) {<!-- -->
//Here, in order to hide the header of the second column, the effect of merging headers is formed.
return {<!-- --> display: "none" };
} else {<!-- -->
return {<!-- --> background: "rgb(242, 242, 242)" };
}
},
// tree-》list
flatten(arr){<!-- -->
let _this=this
return [].concat(...arr.map(item =>{<!-- -->
if(item.expandTrue & amp; & amp; item.children & amp; & amp;item.children.length > 0){<!-- -->
let arr =[].concat(item,..._this.flatten(item.children))
delete item.children
return arr
}
return [].concat(item)
}))
},
// Sort the data in tableData
endtable(ids,list,tableData){<!-- -->
let _this = this
tableData.forEach((item)=>{<!-- -->
let idIndex=ids.indexOf(item.id)
delete item.indexxxx
if(idIndex >-1){<!-- -->
item.indexxxx = list[idIndex].indexxxx
}
if(item.children & amp; & amp;item.children.length>0){<!-- -->
_this.endtable(ids,list,item.children)
}
})
},
mergeInit() {<!-- -->
this.oneNameArr = [];
this.oneNamePos = 0;
this.twoNameArr = [];
this.twoNamePos = 0;
},
merge() {<!-- -->
this.merageInit();
let tableData1 =JSON.parse(JSON.stringify(this.tableData));
// Flatten the obtained data
let list = this.flatten(tableData1);
// Sort the displayed data. The field is indexxxx, which is used to merge cells (repeated merging of cells will cause exceptions, so it is solved in this way)
let num = 0;
for (let i = 0; i < list.length; i + = 1) {<!-- -->
list[i].indexxxx = num;
num + + ;
}
// Sort the displayed data, the field is indexxxx
let ids = list.map((item)=>{<!-- -->return item.id})
this.endtable(ids,list,this.tableData)
console.log('list', list)
let tableList = JSON.parse(JSON.stringify(list))
for (let i = 0; i < tableList.length; i + = 1) {<!-- -->
console.log('tableList', tableList)
if (i === 0) {<!-- -->
// The first line must exist
this.oneNameArr.push(1);
this.oneNamePos = 0;
this.twoNameArr.push(1);
this.twoNamePos = 0;
} else {<!-- -->
// Determine whether the current element is the same as the previous element, eg: this.oneNamePos is the this.oneNameArr serial number
// first row
if (tableList[i].firstRisk === tableList[i - 1].firstRisk) {<!-- -->
this.oneNameArr[this.oneNamePos] + = 1;
this.oneNameArr.push(0);
} else {<!-- -->
this.oneNameArr.push(1);
this.oneNamePos = i;
}
// The second column
if (
tableList[i].secRisk === tableList[i - 1].secRisk & amp; & amp;
tableList[i].firstRisk === tableList[i - 1].firstRisk
) {<!-- -->
this.twoNameArr[this.twoNamePos] + = 1;
this.twoNameArr.push(0);
} else {<!-- -->
this.twoNameArr.push(1);
this.twoNamePos = i;
}
}
}
this.$ref.tableData.doLayout()
},
objectSpanMethod({<!-- --> row, column, rowIndex, columnIndex }) {<!-- -->
// if (columnIndex === 0) { // Used to set the column to be merged
// if (rowIndex % 2 === 0) { // Used to set the row number where the merge starts
// return {<!-- -->
// rowspan: 2, // Number of merged rows
// colspan: 1, // The number of merged columns, if set to 0, it will not be displayed directly.
// };
// }
// return {<!-- -->
// rowspan: 0,
// colspan: 0,
// };
// }
// this.tableData[i].children[j].indexxxx=pppp
console.log("dsagvds", row, column, rowIndex, columnIndex);
if (columnIndex === 0) {<!-- -->
//Merge method for the first column
const row1 = this.oneNameArr[row.indexxxx];
const col1 = row1 > 0 ? 1 : 0; // If row = 0; is merged, this column needs to be cancelled.
return {<!-- -->
rowspan: row1,
colspan: col1,
};
} else if (columnIndex === 1) {<!-- -->
//Merge method for the second column
const row2 = this.twoNameArr[row.indexxxx];
const col2 = row2 > 0 ? 1 : 0; // If row = 0; is merged, this column needs to be cancelled.
return {<!-- -->
rowspan: row2,
colspan: col2,
};
}
},
}
})
</script>
</html>
