element實現(xiàn)合并單元格通用方法
主要思路:
- 對數(shù)據(jù)進行處理,寫了一個getSpanData通用方法。
- 用api中提供的span-method方法。
span-method方法用法:
通過給table傳入span-method方法可以實現(xiàn)合并行或列,方法的參數(shù)是一個對象,里面包含當前行row、當前列column、當前行號rowIndex、當前列號columnIndex四個屬性。該函數(shù)可以返回一個包含兩個元素的數(shù)組,第一個元素代表rowspan,第二個元素代表colspan。 也可以返回一個鍵名為rowspan和colspan的對象。
通用實例
demo.vue
<el-table v-loading="loading" ref="singleTable" :data="tableData" :span-method="handleObjectSpanMethod" highlight-current-row border style="width: 100%;margin-top:10px;" max-height="730" >
JavaScript
// 查詢列表 queryTableList() { getNeeds().then(res => { if (res.code === 0) { // 表格數(shù)據(jù) this.tableData = res.data // 對表格數(shù)據(jù)進行處理,找出需要合并的單元格 this.getSpanData(this.tableData) } }) }, // 計算需要合并的單元格 getSpanData(data) { // 存放計算好的合并單元格的規(guī)則 this.spanData = [] for (var i = 0; i < data.length; i++) { if (i === 0) { this.spanData.push(1) this.pos = 0 } else { // 判斷當前元素與上一個元素是否相同 if (data[i].realOpenDate === data[i - 1].realOpenDate) { this.spanData[this.pos] += 1 this.spanData.push(0) } else { this.spanData.push(1) this.pos = i } } } } // 合并單元格 handleObjectSpanMethod({ row, column, rowIndex, columnIndex }) { // 需要合并的列 // [0, 1, 2].includes(columnIndex ), 表示合并前三列 if (columnIndex === 1) { const _row = this.spanData[rowIndex] const _col = _row > 0 ? 1 : 0 return { rowspan: _row, colspan: _col } } }
getSpanData中spanData處理后的結構:
數(shù)組中12的值表示需要合并的地方,很好理解,就是找到每行中columnIndex對應要合并的位置。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
vue+echarts實現(xiàn)中國地圖流動效果(步驟詳解)
這篇文章主要介紹了vue+echarts實現(xiàn)中國地圖流動效果(步驟詳解),本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-01-01手寫實現(xiàn)vue2下拉菜單dropdown組件實例
這篇文章主要為大家介紹了手寫vue2下拉菜單dropdown組件實例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08