前言
最近需要做一個(gè)表格類APP袁稽，但是原生貌似實(shí)現(xiàn)起來(lái)麻煩(哪位iOS大佬如果有好思路不勝感激，我還沒有研究，感覺是scrollView嵌套tableView披蕉，但總感覺不對(duì)梆暖，包括合并單元格肯定更麻煩伞访，還是h5吧，原生控件方便又快捷)轰驳，開會(huì)的時(shí)候不知哪位小伙伴冒了一句厚掷，h5好做，于是级解。冒黑。。
先看一下效果勤哗，暫時(shí)是本地mock數(shù)據(jù)抡爹，GitHub地址
需求整理
- 1.相鄰的相同值的行數(shù)據(jù)項(xiàng)進(jìn)行單元格合
- 2.表格表頭固定
- 3.側(cè)欄可固定
- 4.單元格內(nèi)可嵌套自定義組件
作為vue沒學(xué)習(xí)多久的渣渣來(lái)說(shuō)，其實(shí)也是兩眼蒙圈芒划，作為資深輪子搬運(yùn)工冬竟，于是開始找輪子，果然找到了國(guó)人寫的vue table組件民逼，功能非常棒泵殴，支持單元格合并、單元格編輯拼苍、多表頭固定笑诅、多列固定、列拖動(dòng)疮鲫、排序苟鸯、自定義列、分頁(yè)... vue-easytable 當(dāng)然還有其他優(yōu)秀輪子如vuetable-2棚点。
vue-easytable 就不多說(shuō)了早处，GitHub上有api詳細(xì)說(shuō)明，本次只說(shuō)遇到的問(wèn)題以及解決方法
問(wèn)題一 相鄰的相同值的行數(shù)據(jù)項(xiàng)進(jìn)行單元格合
show me code 其實(shí)就是遍歷所有數(shù)據(jù)瘫析，對(duì)比下一條數(shù)據(jù)是否相同砌梆，再累加
// 數(shù)據(jù)整理
formatData() {
const KEY_ROWSPAN = "rowSpan";
var k = 0;
while (k < this.tableData.length) {
this.tableData[k][KEY_ROWSPAN] = 1;
for (var i = k + 1; i <= this.tableData.length - 1; i++) {
if (
this.tableData[k][KEY_NAME] === this.tableData[i][KEY_NAME] &&
this.tableData[k][KEY_NAME] !== ""
) {
this.tableData[k][KEY_ROWSPAN]++;
} else {
break;
}
}
k = i;
}
this.resultData = this.tableData;
},
// 數(shù)據(jù)合并方法
cellMerge(rowIndex, rowData, field) {
if (field === KEY_NAME && rowData.rowSpan > 0) {
// console.log(rowData.rowSpan);
return {
colSpan: 1,
rowSpan: rowData.rowSpan,
content: rowData[field],
componentName: ""
};
}
}
問(wèn)題二默责、問(wèn)題三
查看api，只設(shè)置一個(gè)屬性即可解決咸包，在此不做復(fù)述桃序，可直接看demo
問(wèn)題四 單元格內(nèi)可嵌套自定義組件
1.首先封裝好你需要嵌套的組件并暴露easytable數(shù)據(jù)傳遞屬性rowData、field烂瘫、index
2.全局導(dǎo)入剛剛封裝好的組件
3.在cellMerge方法中處理
cellMerge(rowIndex, rowData, field) {
if (field === "score") {
return {
colSpan: 1,
rowSpan: 1,
content: "",
componentName: "bar"
};
}
}
以為這樣就大功告成了嗎媒熊，不沒有，后來(lái)發(fā)現(xiàn)文字無(wú)法換行居中坟比，GitHub上也很多人提了issue芦鳍，但就是沒有解決，這就很尷尬了葛账，本著社會(huì)主義接班人的精神柠衅，我看了一下
![]()
界面丑的沒有標(biāo)題.jpeg
我的解決方案
1.查看api哪里有暴露，于是看到columnCellClass方法
2.columnCellClass方法返回新樣式籍琳，覆蓋作者樣式
columnCellClass(rowIndex, columnName, rowData) {
if (columnName === "name" || columnName === "category") {
return "mine-custom-cell";
}
}
.mine-custom-cell {
padding: 0;
}
.mine-custom-cell .v-table-body-cell {
padding: 0;
white-space: normal;
line-height: normal !important;
/* display: table-cell; */
/* vertical-align: middle; */
position: relative;
}
.mine-custom-cell .v-table-body-cell span {
position: absolute;
width: 100%;
top: 50%;
left: 0;
transform: translateY(-50%);
}
總結(jié)
作為一個(gè)原生iOS開發(fā)為何越來(lái)越覺得h5好玩了菲宴，真的是無(wú)言以對(duì)了，這以后找工作問(wèn):會(huì)XX嗎趋急，深入過(guò)嗎喝峦？會(huì)，沒有呜达，只會(huì)搬輪子谣蠢。直接gg，共勉闻丑。最后再次附上GitHub地址
