文章目錄
-
- （一）一個數組構成的表格（資料：每個數組項有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
};
}
}
},