element-ui table表格動態列合并

isLishude 發布于2019-08-23 10:35 / 2386人閱讀

摘要：前言的時候沒有表格合并的方法，這當時做表格合并的功能時候，非常頭疼。開始官方已經支持表格合并的方法，那怎么做到表格動態合并呢，還是直接看代碼吧。該函數可以返回一個包含兩個元素的數組，第一個元素代表，第二個元素代表。

前言

element-ui 1.0的時候沒有表格合并的方法，這當時做表格合并的功能時候，非常頭疼。2.0開始官方已經支持表格合并的方法，那怎么做到表格動態合并呢，還是直接看代碼吧。

官方例子

通過給table傳入span-method方法可以實現合并行或列，方法的參數是一個對象，里面包含當前行row、當前列column、當前行號rowIndex、當前列號columnIndex四個屬性。該函數可以返回一個包含兩個元素的數組，第一個元素代表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;
              }
            }
          })
        })    
      }

預處理生成一個二維數組，然后在放在objectSpanMethod方法里面。

GPU云服務器云服務器 table合并合并列列合并 table單元格選中合并

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/96494.html

vue element-ui table組件動態生成表頭和數據并修改單元格格式父子組件通信

摘要：父組件定義表頭和表內容表格數據表頭數據引入并注冊子組件注冊子組件獲取表頭和表內容數據。父組件定義表頭和表內容 data(){ return{ // 表格數據 tableColumns: [], // 表頭數據 titleData:[], } } 引入并注冊子組件 import TableComponents from ../../compon...

supernavy 2019-08-26 10:48 評論0 收藏0
步步向前之Element-UI

摘要：無效方案根據交易所小時成交量占比和實時價格加權計算得到渲染結果是一個包含了文字，同時有名為的，并無小圖標，后邊中括號結構里只能有一個有待考證。 Table 固定表頭只要在el-table元素中定義了height屬性，即可實現固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實際應用大多數是需要自適應占滿父元素，超出滾動固定表頭的...

Imfan 2019-08-02 11:51 評論0 收藏0
步步向前之Element-UI

摘要：無效方案根據交易所小時成交量占比和實時價格加權計算得到渲染結果是一個包含了文字，同時有名為的，并無小圖標，后邊中括號結構里只能有一個有待考證。 Table 固定表頭只要在el-table元素中定義了height屬性，即可實現固定表頭的表格，而不需要額外的代碼。例如： ... 這里文檔只給了一種固定高度250px的解決方案，實際應用大多數是需要自適應占滿父元素，超出滾動固定表頭的...

ZoomQuiet 2019-08-29 17:08 評論0 收藏0
vue封裝element-ui的table組件,靈活配置表頭實現表格內編輯，按鈕，鏈接等功能。

摘要：一封裝的組件定義表格高度全屏增加前臺分頁功能。表格內編輯后，自動選中該行。單元格內數據樣式單元格內按鈕，可多個。觸發組件綁定函數，參數按鈕名稱，按鈕樣式，按鈕事件標識。單元格是否可點擊的判斷函數，可進行復雜的函數判斷。 vue-bxz-table 一、封裝element-ui的table組件：定義表格高度全屏增加前臺分頁功能。自定義表頭，循環輸出整體表結構。表格內編輯（輸入框...

henry14 2019-08-26 13:30 評論0 收藏0