亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Element表格合并

yy13818512006 / 3015人閱讀

摘要：注意在合并第一行后需要合并第二行時需要判斷要合并的第二行的第一行值是不是一樣在這里我的處理方式是第二行的值加上第一行希望寫的對大家有用如果我寫的沒看明白的可以聯(lián)系我

var mergeIndex = 0;
var hasMerge = false;
var mergeIndex1 = 0;
var hasMerge1 = false;
//方法的全局變量
//官網(wǎng)給我們提供了span-method的方法可以進行表格合并,有4個參數(shù)返回:row,column,rowIndex,columnIndex;row和column是表格的行和列,里面是當前行和列的值,也就是tableData里的值,rowIndex,columnIndex是當前行和列的序號
arraySpanMethod({ row, column, rowIndex, columnIndex }) {

    var that = this;
    var spanNum = this.spanNum;
    var spanNum1 = this.spanNum1;
    console.log("FFF",spanNum)
  //   合并第二列
    if (columnIndex === 1) {
      var num = spanNum1[row.fldSTName+"-"+row.fldRName];
      if (!hasMerge) {
        hasMerge = true;
        mergeIndex = rowIndex;
        if (num === 1) {
          hasMerge = false;
        }
        return [num, 1];//[10,1]
      } else {
        if (rowIndex === mergeIndex + num - 1) {
          hasMerge = false;
        }
        return [0, 0];
      }
    }
    //合并第一列
    if (columnIndex == 0) {
      var num = spanNum[row.fldSTName];
      if (!hasMerge1) {
        hasMerge1 = true;
        mergeIndex1 = rowIndex;
        if (num === 1) {
          hasMerge1 = false;
        }
        return [num, 1];
         // 這里返回的是行和列的合并數(shù)量,可以返回一個數(shù)組,也可以返回一個對象,效果一樣
         // 這里rowspan為num是幾行就有幾行合并,colspan為1列有1列合并,你要合并幾行幾列就寫上相應的數(shù)字
      } else {//對合并后的
        if (rowIndex === mergeIndex1 + num - 1) {
          hasMerge1 = false;
        }
        return [0, 0];
       // 這里要寫一個else的判斷,不然被合并列的原始數(shù)據(jù)會填充到合并之后的表格里
      // 這個判斷是把合并的前幾行值省略,直接填原先最后行的值,合并了幾行,就省略幾行的值
      }
    }
}

上面是我封裝的一個合并行的方法  合并列一樣
用上面的方法首先需要處理一下數(shù)據(jù) 把需要合并的排列在一起，這里的spanNum的數(shù)據(jù)格式是

arr數(shù)組里面包含的是你合并行的唯一數(shù)據(jù)（有很多大同市但這里只會出現(xiàn)一次）,這里row.fldSTName是合并行的當前值。注意在合并第一行后需要合并第二行時需要判斷要合并的第二行的第一行值是不是一樣


在這里我的處理方式是 第二行的值加上第一行（row.fldSTName+"-"+row.fldRName）


希望寫的對大家有用 如果我寫的沒看明白的可以聯(lián)系我QQ1195392918

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/109697.html

相關(guān)文章

  • element-ui table表格動態(tài)列合并

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

    isLishude 評論0 收藏0

  • element-ui表格數(shù)據(jù)的應用

    摘要：需求原型需求對表格一列每行都添加一個按鈕。整個表格每過自動刷新一次。后端返回數(shù)據(jù)的為的數(shù)據(jù)思路兩個接口的數(shù)據(jù)。在獲取的數(shù)據(jù)后，再遍歷兩個數(shù)據(jù)。根據(jù)對應的，合并到值再渲染到頁面上。核心代碼獲取表格數(shù)據(jù)待刷新單次點擊獲取的數(shù)據(jù) 需求原型showImg(https://segmentfault.com/img/bVbcRQR?w=380&h=76);需求：對表格date一列,每行都添加一個按...

    simon_chen 評論0 收藏0

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

    摘要：最近項目中做表格比較多，對表格的使用，只需要傳遞進去數(shù)據(jù)，然后寫死表頭即可渲染。該函數(shù)可以返回一個包含兩個元素的數(shù)組，第一個元素代表，第二個元素代表。也可以返回一個鍵名為和的對象。 最近項目中做表格比較多，對element表格的使用，只需要傳遞進去數(shù)據(jù)，然后寫死表頭即可渲染。 但現(xiàn)實中應用中，如果寫死表頭，并且每個組件中寫自己的表格，不僅浪費時間而且消耗性能。這個時候需要動態(tài)渲染表頭。...

    funnyZhang 評論0 收藏0

  • jsu系列之表格組件 ---- jsu.Table

    摘要：作者注是基于擴展的原生表格插件，設計理念來源于的組件該庫基于，暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發(fā)過程中遇到的問題和解決思路，歡迎討論和指正。 作者注：jsu.Table是基于jQuery擴展的原生表格插件，設計理念來源于Element.ui的Table組件（該UI庫基于vue.js，暫時未找到jQuery版本因此在此造輪子）。本文將記錄jsu系列所有組件開發(fā)過程...

    soasme 評論0 收藏0

  • jsu系列之表格組件 ---- jsu.Table

    摘要：作者注是基于擴展的原生表格插件，設計理念來源于的組件該庫基于，暫時未找到版本因此在此造輪子。本文將記錄系列所有組件開發(fā)過程中遇到的問題和解決思路，歡迎討論和指正。 作者注：jsu.Table是基于jQuery擴展的原生表格插件，設計理念來源于Element.ui的Table組件（該UI庫基于vue.js，暫時未找到jQuery版本因此在此造輪子）。本文將記錄jsu系列所有組件開發(fā)過程...

    everfly 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<