資訊專欄INFORMATION COLUMN
摘要：前言的時候沒有表格合并的方法，這當時做表格合并的功能時候，非常頭疼。開始官方已經(jīng)支持表格合并的方法，那怎么做到表格動態(tài)合并呢，還是直接看代碼吧。該函數(shù)可以返回一個包含兩個元素的數(shù)組，第一個元素代表，第二個元素代表。
前言
element-ui 1.0的時候沒有表格合并的方法，這當時做表格合并的功能時候，非常頭疼。2.0開始官方已經(jīng)支持表格合并的方法，那怎么做到表格動態(tài)合并呢，還是直接看代碼吧。
官方例子通過給table傳入span-method方法可以實現(xiàn)合并行或列，方法的參數(shù)是一個對象，里面包含當前行row、當前列column、當前行號rowIndex、當前列號columnIndex四個屬性。該函數(shù)可以返回一個包含兩個元素的數(shù)組，第一個元素代表rowspan，第二個元素代表colspan。 也可以返回一個鍵名為rowspan和colspan的對象。
https://jsfiddle.net/ve4sy51x/1/
合并方法https://jsfiddle.net/ve4sy51x...
通過一層一層往下找，
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if(cacheData.length<=0){
return false
}
let colNum = cacheData[rowIndex][columnIndex];
if (colNum < 2) {
return {
rowspan: colNum,
colspan: colNum
}
} else {
return {
rowspan: colNum,
colspan: 1
}
}
},
combine(){
this.tableData.forEach((res,i)=> {
cacheData[i] = [];
colData.forEach((item, j) => {
if (i === 0) {
cacheData[0][j] = 1;
cache = JSON.parse(JSON.stringify(res));
cacheIndex[j] = 0;
} else {
if(res[item.prop] === cache[item.prop] && item.prop !=="index"){
cacheData[cacheIndex[j]][j]++;
cacheData[i][j] = 0
}else{
cache[item.prop] = res[item.prop];
cacheIndex[j] = i;
cacheData[i][j] = 1;
}
}
})
})
}
預處理生成一個二維數(shù)組，然后在放在objectSpanMethod方法里面。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/96494.html
摘要：父組件定義表頭和表內容表格數(shù)據(jù)表頭數(shù)據(jù)引入并注冊子組件注冊子組件獲取表頭和表內容數(shù)據(jù)。 父組件 定義表頭和表內容 data(){ return{ // 表格數(shù)據(jù) tableColumns: [], // 表頭數(shù)據(jù) titleData:[], } } 引入并注冊子組件 import TableComponents from ../../compon...
摘要：無效方案根據(jù)交易所小時成交量占比和實時價格加權計算得到渲染結果是一個包含了文字，同時有名為的，并無小圖標，后邊中括號結構里只能有一個有待考證。 Table 固定表頭 只要在el-table元素中定義了height屬性，即可實現(xiàn)固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實際應用大多數(shù)是需要自適應占滿父元素，超出滾動固定表頭的...
摘要：無效方案根據(jù)交易所小時成交量占比和實時價格加權計算得到渲染結果是一個包含了文字，同時有名為的，并無小圖標，后邊中括號結構里只能有一個有待考證。 Table 固定表頭 只要在el-table元素中定義了height屬性，即可實現(xiàn)固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實際應用大多數(shù)是需要自適應占滿父元素，超出滾動固定表頭的...
摘要：一封裝的組件定義表格高度全屏增加前臺分頁功能。表格內編輯后，自動選中該行。單元格內數(shù)據(jù)樣式單元格內按鈕，可多個。觸發(fā)組件綁定函數(shù)，參數(shù)按鈕名稱，按鈕樣式，按鈕事件標識。單元格是否可點擊的判斷函數(shù)，可進行復雜的函數(shù)判斷。 vue-bxz-table 一、封裝element-ui的table組件： 定義表格高度全屏 增加前臺分頁功能。 自定義表頭，循環(huán)輸出整體表結構。 表格內編輯（輸入框...
閱讀 3427·2021-11-25 09:43
閱讀 3473·2021-11-19 09:40
閱讀 2481·2021-10-14 09:48
閱讀 1297·2021-09-09 11:39
閱讀 1936·2019-08-30 15:54
閱讀 2834·2019-08-30 15:44
閱讀 2007·2019-08-29 13:12
閱讀 1552·2019-08-29 12:59
