vue elementUI table 自定義表頭和行合并

funnyZhang 發布于2019-08-26 13:53 / 2792人閱讀

摘要：最近項目中做表格比較多，對表格的使用，只需要傳遞進去數據，然后寫死表頭即可渲染。該函數可以返回一個包含兩個元素的數組，第一個元素代表，第二個元素代表。也可以返回一個鍵名為和的對象。

最近項目中做表格比較多，對element表格的使用，只需要傳遞進去數據，然后寫死表頭即可渲染。

但現實中應用中，如果寫死表頭，并且每個組件中寫自己的表格，不僅浪費時間而且消耗性能。這個時候需要動態渲染表頭。

而官方例子都是寫死表頭，那么為了滿足項目需求，只能自己來研究一下。

1、自定義表頭

代碼如下，其實就是分了兩部分，表格主數據是在TableData對象中，表頭的數據保存在headerDatas，headerDatas.label其實就是表頭的值，如果表頭是“序號”，那么headerDatas.label="序號"，在TableData中構建TableData[序號]= 1 這樣的map對象，就可以動態渲染出想要的表格

2、行合并

在項目中，有些表格常常會有像下面這樣的需求，一行合并后面幾行，那么這個怎么處理呢

官方文檔中有這個方法

通過給table傳入span-method方法可以實現合并行或列，方法的參數是一個對象，里面包含當前行row、當前列column、當前行號rowIndex、當前列號columnIndex四個屬性。該函數可以返回一個包含兩個元素的數組，第一個元素代表rowspan，第二個元素代表colspan。也可以返回一個鍵名為rowspan和colspan的對象。




    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex % 2 === 0) {//偶數行
          if (columnIndex === 0) {//第一列
            return [1, 2];//1合并一行，2占兩行
          } else if (columnIndex === 1) {//第二列
            return [0, 0];//0合并0行，0占0行
          }
        }
      },

      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,//合并的行數
              colspan: 1//合并的列數，設為０則直接不顯示
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }

這里面可以通過對rowIndex，columnIndex根據自己的要求作一些條件判斷，然后返回rowspan，colspan就可以合并了。

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

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

ElementUI的Table組件中的renderHeader方法研究

摘要：難道是因為這個組件自帶標簽胡亂猜疑是解決不了問題的。為何稱之為勉強版，因為從上面的也看出來了。再看數組第二個值，這便是一個完整的示例了。也希望能更加努力的學習和進步，更深的理解前端這門藝術項目使用ElementUI，挺好用的，頁面中有些地方的幫助提示通過使用組件Tooltip和el-icon-question來展示，代碼如下：本月累計收益截圖如下： sho...

IntMain 2019-08-23 11:55 評論0 收藏0
vue導入處理Excel表格功能步驟實例

　　1. 前言　　本篇文章就是為大家講講前端導入并處理excel表格的情況，順便講講vue導入并處理excel數據；也總結下使用工具?！　?.vue導入Excel表格　　vue導入Excel表格主要有兩種常用的方法，一個是借助ElementUI文件上傳進行表格導入，另一個是自帶的input做文件上傳；以下對兩個方法做詳細介紹；　　2.1 使用ElementUI中的upload組件　　安裝Eleme...

3403771864 2022-11-29 09:16 評論0 收藏0
開發中遇到的問題總結

摘要：獲取字符串中出現次數最多的字符。去掉字符串中的所有空格中對象數組按對象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

wenshi11019 2019-08-23 16:03 評論0 收藏0
開發中遇到的問題總結

摘要：獲取字符串中出現次數最多的字符。去掉字符串中的所有空格中對象數組按對象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

Yuqi 2019-08-30 15:56 評論0 收藏0