使用 elementui 做項(xiàng)目的時(shí)候大家應(yīng)該會(huì)遇到很多關(guān)于表格的需求
下面是總結(jié)的兩個(gè)項(xiàng)目中遇到的問題.
查看文檔的話是很簡(jiǎn)單, 但是很多需求還是需要大家自己去寫的.
第一個(gè) --- 表格合并
1. 需求頁面如下:
這個(gè)需求如果直接用 js 寫的話就太簡(jiǎn)單了.但是使用 vue, 就需要自己修改了. 其實(shí)也不是很難,主要還是數(shù)據(jù)解析
各種合并
2. 數(shù)據(jù)結(jié)構(gòu)如下:
var list = [
{
"id": "16EE8A54E6917F6479905CDC5B031F22",
"activityPointsDOS": [
{
"id": "16EE8A54E0C17F647404A2DC7783EE88",
"activityPointsDOS": [
{
"id": "1",
"value": "6",
"activityName": "堅(jiān)定政治立場(chǎng)。",
"message": " （1）牢固樹立“四個(gè)意識(shí)”巴拉巴拉",
"period": "19上半年"
},
{
"id": "2",
"value": "8",
"activityName": "堅(jiān)定政治立場(chǎng)画恰。",
"message": "（2）嚴(yán)格遵守政治紀(jì)律和政治規(guī)矩.巴拉啦",
"period": "19上半年"
}
],
"activityName": "1. 堅(jiān)定政治立場(chǎng)懈费。(10分)"
},
{
"id": "16EE8A54E4817F64779EF35CC6671C10",
"activityPointsDOS": [
{
"id": "3",
"value": "7",
"activityName": "堅(jiān)持學(xué)習(xí)提高存炮。",
"message": "（1）及時(shí)認(rèn)真參加支部集體學(xué)習(xí)....",
"period": "19上半年"
},
{
"id": "4",
"value": "3",
"activityName": "堅(jiān)持學(xué)習(xí)提高也颤。",
"message": "（2）每年集中學(xué)習(xí)培訓(xùn)....",
"period": "19上半年"
},
{
"id": "5",
"value": "5",
"activityName": "堅(jiān)持學(xué)習(xí)提高。",
"message": "（3）有取得更高....位",
"period": "19上半年"
}
],
"activityName": "2.堅(jiān)持學(xué)習(xí)提高。(6分)"
},
{
"id": "16EE8A54E4817F64779EF35CC6671C10",
"activityPointsDOS": [
{
"id": "6",
"value": "7",
"activityName": "嚴(yán)格組織生活黍翎。",
"message": "（1）按季度.....",
"period": "19上半年"
},
{
"id": "7",
"value": "3",
"activityName": "嚴(yán)格組織生活凉驻。",
"message": "（2）按時(shí)上黨課.......腻要。",
"period": "19上半年"
},
{
"id": "8",
"value": "5",
"activityName": "堅(jiān)持學(xué)習(xí)提高。",
"message": "（3）積極參加",
"period": "19上半年"
}
],
"activityName": "3.嚴(yán)格組織生活涝登。(13分)"
}
],
"category": "合格積分\r\n(40分)"
},
{
"id": "16EE8A54FF617F6491391BD04A0D4E7F",
"activityPointsDOS": [
{
"id": "16EE8A54EA517F647D257760897C805F",
"activityPointsDOS": [
{
"id": "8",
"value": "10",
"activityName": "1.所在基層黨組織情況雄家。（10分）",
"message": " (1) 根據(jù)所在.....",
"period": "19上半年"
}
],
"activityName": "1.所在基層黨組織情況。（10分）"
},
{
"id": "16EE8A54E8517F647B3DE374CF0D6D93",
"activityPointsDOS": [
{
"id": "10",
"value": "3",
"activityName": "2.年度評(píng)議胀滚、考核情況趟济。（10分）",
"message": " (1) 在黨建....",
"period": "19上半年"
},
{
"id": "9",
"value": "10",
"activityName": "2.年度評(píng)議、考核情況咽笼。（10分）",
"message": " (2）在年度.........................................................................",
"period": "19上半年"
}
],
"activityName": "2.年度評(píng)議顷编、考核情況。（10分）"
}
],
"category": "綜合積分\r\n（20分）"
}
];
3. 代碼如下:
<el-table
:data="alldata"
:span-method="arraySpanMethod"
border
style="width: 100%">
<el-table-column
prop="category"
label="項(xiàng)目及分值"
width="180">
</el-table-column>
<el-table-column
prop
label="參考標(biāo)準(zhǔn)及評(píng)價(jià)方法">
<el-table-column prop="activityName"></el-table-column>
<el-table-column prop="message"></el-table-column>
</el-table-column>
<el-table-column
prop="value"
label="參考分值">
</el-table-column>
</el-table>
// 1. 獲取后臺(tái)數(shù)據(jù)
created() {
// 二次處理數(shù)據(jù)
this.alldata = this.handleTableArr(list);
console.log(this.alldata);
},
methods: {
// 解析數(shù)據(jù)
handleTableArr(data) {
let arr = [];
for (let i = 0; i < data.length; i++) {
let category_info = data[i];
let activityPointsDOS = category_info["activityPointsDOS"];
let count = 0;
for (let j = 0; j < activityPointsDOS.length; j++){
let activityTwo_info = activityPointsDOS[j];
let activityTwo_activityPointsDOS = activityPointsDOS[j]["activityPointsDOS"];
for (let k = 0; k < activityTwo_activityPointsDOS.length; k++){
count ++;
let info = {
// 確定每天數(shù)據(jù)的 合并行的數(shù)量
span_num: k === 0 ? activityTwo_activityPointsDOS.length : 0,
value:activityTwo_activityPointsDOS[k]["value"],
message:activityTwo_activityPointsDOS[k]["message"],
activityName:activityTwo_info["activityName"],
category: category_info["category"],
};
arr.push(info);
}
}
// 第一列的合并數(shù)量, 賦值給每個(gè)大項(xiàng)的第一個(gè)單元格. 比如合格積分要合并 8 行.
arr[arr.length - count]["count"] = count;
}
return arr;
},
// 表格合并的方法
arraySpanMethod({row, column, rowIndex, columnIndex}) {
// 第一列
if (columnIndex === 0){
if (row.count){
return [row.count, 1]
}else{
return [0, 0]
}
}
// 第二列
if (columnIndex === 1){
if (row.span_num > 0 ){
return [row.span_num, 1]
}else{
return [0, 0]
}
}
}
}
參考鏈接: https://www.cnblogs.com/jun-qi/p/11052634.html
第二個(gè) --- 表格縱向表頭
官網(wǎng)上的案例都是橫向的表格, 如下圖:
image
而經(jīng)常會(huì)遇到的需求就是縱向的表頭. 數(shù)據(jù)結(jié)構(gòu)不同, 寫法也不一樣, 各取所需.
1. 需求頁面如下:
縱向
2. 數(shù)據(jù)結(jié)構(gòu)如下:
補(bǔ)充說明: list 中的 id 是學(xué)生的日志 id, 如果 id 為 0 說明當(dāng)天日志沒有完成,將顯示未完成, 如果有將顯示可查看
loginfo: {
'students': [
{
'id':1,
'name':'張三',
'list': [
{'id':11},
{'id':0},
{'id':0},
{'id':0}]
},
{
'id':2,
'name':'李四',
'list': [
{'id':'21'},
{'id':0},
{'id':0},
{'id':0}]
},
{
'id':3,
'name':'王二麻子',
'list': [
{'id':0},
{'id':0},
{'id':0},
{'id':36}]
},
'dateList': ['06-01','06-02','06-03','06-04']
}
3. 代碼如下:
<el-table
:data="loginfo.students"
border
style="width: 100%">
<el-table-column
prop="name"
width="150"
align="center"
label="姓名/日期"
fixed
>
</el-table-column>
<template v-for='(col,i) in loginfo.dateList'>
<el-table-column
:show-overflow-tooltip="true"
:label="col"
:key="col"
width="100"
align="center"
>
<template slot-scope="scope">
<span>
<el-tag @click="showLog(scope.row, i)"
:type="scope.row.list[i].id != 0 ? 'success' : 'danger'"> {{scope.row.list[i].id != 0 ? '可查看' : '未完成'}}</el-tag>
</span>
</template>
</el-table-column>
</template>
</el-table>
