成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

funnyZhang / 2819人閱讀

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

最近項(xiàng)目中做表格比較多，對(duì)element表格的使用，只需要傳遞進(jìn)去數(shù)據(jù)，然后寫死表頭即可渲染。

但現(xiàn)實(shí)中應(yīng)用中，如果寫死表頭，并且每個(gè)組件中寫自己的表格，不僅浪費(fèi)時(shí)間而且消耗性能。這個(gè)時(shí)候需要?jiǎng)討B(tài)渲染表頭。

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

1、自定義表頭

代碼如下，其實(shí)就是分了兩部分，表格主數(shù)據(jù)是在TableData對(duì)象中，表頭的數(shù)據(jù)保存在headerDatas，headerDatas.label其實(shí)就是表頭的值，如果表頭是“序號(hào)”，那么headerDatas.label="序號(hào)"，在TableData中構(gòu)建TableData[序號(hào)]= 1 這樣的map對(duì)象，就可以動(dòng)態(tài)渲染出想要的表格
2、行合并

在項(xiàng)目中，有些表格常常會(huì)有像下面這樣的需求，一行合并后面幾行，那么這個(gè)怎么處理呢

官方文檔中有這個(gè)方法

通過給table傳入span-method方法可以實(shí)現(xiàn)合并行或列，方法的參數(shù)是一個(gè)對(duì)象，里面包含當(dāng)前行row、當(dāng)前列column、當(dāng)前行號(hào)rowIndex、當(dāng)前列號(hào)columnIndex四個(gè)屬性。該函數(shù)可以返回一個(gè)包含兩個(gè)元素的數(shù)組，第一個(gè)元素代表rowspan，第二個(gè)元素代表colspan。 也可以返回一個(gè)鍵名為rowspan和colspan的對(duì)象。




    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex % 2 === 0) {//偶數(shù)行
          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,//合并的行數(shù)
              colspan: 1//合并的列數(shù)，設(shè)為０則直接不顯示
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109744.html

相關(guān)文章

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

    摘要：難道是因?yàn)檫@個(gè)組件自帶標(biāo)簽胡亂猜疑是解決不了問題的。為何稱之為勉強(qiáng)版，因?yàn)閺纳厦娴囊部闯鰜砹?。再看?shù)組第二個(gè)值，這便是一個(gè)完整的示例了。也希望能更加努力的學(xué)習(xí)和進(jìn)步，更深的理解前端這門藝術(shù) 項(xiàng)目使用ElementUI，挺好用的，頁面中有些地方的幫助提示通過使用組件Tooltip和el-icon-question來展示，代碼如下： 本月累計(jì)收益 截圖如下： sho...

    IntMain 評(píng)論0 收藏0

  • vue導(dǎo)入處理Excel表格功能步驟實(shí)例

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

    3403771864 評(píng)論0 收藏0

  • 開發(fā)中遇到的問題總結(jié)

    摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對(duì)象數(shù)組按對(duì)象屬性排序 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 評(píng)論0 收藏0

  • 開發(fā)中遇到的問題總結(jié)

    摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對(duì)象數(shù)組按對(duì)象屬性排序 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 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<