文章目录
-
- （一）一个数组构成的表格（数据：每个数组项有1个子数组）
-
- 需求：
- 效果：
- 原数据和处理后数据
- 代码：（包括模拟数据的生成和数据处理）
- （二） 多个数组构成的表格（每个数组项有多个子数组）
-
- 效果
- 数据
- 代码：（包括模拟数据的生成和数据处理）
（一）一个数组构成的表格（数据：每个数组项有1个子数组）
需求：
效果：
原数据和处理后数据
代码：（包括模拟数据的生成和数据处理）
<el-table v-loading="loading" :data="listData" :span-method="objectSpanMethod">
<el-table-column prop="getOddNumbers" label="领用单号" width="20"></el-table-column>
<el-table-column prop="assetsCoding" label="资产编码" width="200"></el-table-column>
</el-table>
data() {
return {
loading: false,
listData: [],
```js
getList(){
this.loading = true;
this.listData = [];
let colNums = [2,2,1,3,3]
// 模拟数据
let resData = [];
for(var i=0; i<5; i++){
let form = {}
form.id = i;
form.getOddNumbers = '领用单号'+i;
let temp = [];
let len = colNums[i]
for(let j=0; j<len; j++){
let tempItem = {};
tempItem.assetsCoding = '资产编码'+i+j;
temp.push(tempItem);
}
form.assets = temp;
resData.push(form)
}
// 数据处理
//rowspan ---合并关键词
resData.forEach((item, index)=>{
let itemTemp = Object.assign({}, item);
delete itemTemp.assets
item.assets.forEach((assetItem, assetIndex)=>{
var assetItemTemp = Object.assign({},itemTemp,assetItem)
if(assetIndex == 0){
assetItemTemp.rowspan = item.assets.length
}
this.listData.push(assetItemTemp);
})
})
console.log('原数据：', resData)
console.log('处理后：', this.listData)
this.listData.forEach(item =>{
console.log('合并关键词：', item.rowspan)
})
this.loading = false;
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex < 1) {//前10列合并
if (row.rowspan >= 1) {
return {
rowspan: row.rowspan,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
},
参考链接：一个数组构成的表格的合并
参考链接：感觉可以更灵活地实现合并，但是我还没仔细研究，先保存链接
（二） 多个数组构成的表格（每个数组项有多个子数组）
效果
数据
代码：（包括模拟数据的生成和数据处理）
<el-table v-loading="loading" :data="listData" :span-method="objectSpanMethod">
<el-table-column prop="getOddNumbers" label="领用单号" width="20"></el-table-column>
<el-table-column prop="assetsType" label="分类" width="20"></el-table-column>
<el-table-column prop="assetsCoding" label="资产编码" width="200"></el-table-column>
</el-table>
data() {
return {
loading: false,
listData: [],
```js
getList(){
this.loading = true;
this.listData = [];
let colNums1 = [2,2,1,3,3]
let colNums2 = [3,0,2,1,4]
// 模拟数据
let resData = [];
for(var i=0; i<5; i++){
let form = {}
form.id = i;
form.getOddNumbers = '领用单号'+i;
let temp1 = [];
let len1 = colNums1[i]
for(let j=0; j<len1; j++){
let tempItem = {};
tempItem.assetsCoding = '资产编码'+i+j;
temp1.push(tempItem);
}
form.assets1 = temp1;
let temp2 = [];
let len2 = colNums2[i]
for(let j=0; j<len2; j++){
let tempItem = {};
tempItem.assetsCoding = '资产编码'+i+j;
temp2.push(tempItem);
}
form.assets2 = temp2;
resData.push(form)
}
// 数据处理
//rowspan ---合并关键词
let arr = []
resData.forEach((item, index)=>{
let itemTemp = Object.assign({}, item);
console.log(item)
let useRowSpan = false;
if (item.assets1.length >= 1 || item.assets2.length >= 1) {
item.rowspan = item.assets1.length + item.assets2.length;
}
item.assets1.forEach((pItem, pindex) => {
item.assetsType="分类1"
if (useRowSpan) {
item.rowspan = 0;
}
if (pindex === 0 && item.assets1.length)
pItem.typeRowspan = item.assets1.length;
arr.push({ ...item, ...pItem });
useRowSpan = true;
});
item.assets2.forEach((tItem, tindex) => {
item.assetsType = "分类2"
if (tindex === 0 && item.assets2.length)
tItem.typeRowspan = item.assets2.length;
if (useRowSpan) {
item.rowspan = 0;
}
arr.push({ ...item, ...tItem });
useRowSpan = true;
});
})
this.listData = arr
console.log('原数据：', resData)
console.log('处理后：', this.listData)
this.listData.forEach(item =>{
console.log('getOddNumbers:'+item.getOddNumbers+
'，assetsType:'+item.assetsType+
'，assetsCoding:'+item.assetsCoding+
'，合并关键词：', item.rowspan,
'---------合并关键词（分类）',item.typeRowspan
)
})
this.loading = false;
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {//前10列合并
if (row.rowspan) {
return {
rowspan: row.rowspan,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
if(columnIndex == 1) {
if (row.typeRowspan) {
return {
rowspan: row.typeRowspan,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
},