国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Element表格合并

yy13818512006 / 2961人閱讀

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

var mergeIndex = 0;
var hasMerge = false;
var mergeIndex1 = 0;
var hasMerge1 = false;
//方法的全局變量
//官網(wǎng)給我們提供了span-method的方法可以進(jìn)行表格合并,有4個(gè)參數(shù)返回:row,column,rowIndex,columnIndex;row和column是表格的行和列,里面是當(dāng)前行和列的值,也就是tableData里的值,rowIndex,columnIndex是當(dāng)前行和列的序號(hào)
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ù)量,可以返回一個(gè)數(shù)組,也可以返回一個(gè)對(duì)象,效果一樣
         // 這里rowspan為num是幾行就有幾行合并,colspan為1列有1列合并,你要合并幾行幾列就寫上相應(yīng)的數(shù)字
      } else {//對(duì)合并后的
        if (rowIndex === mergeIndex1 + num - 1) {
          hasMerge1 = false;
        }
        return [0, 0];
       // 這里要寫一個(gè)else的判斷,不然被合并列的原始數(shù)據(jù)會(huì)填充到合并之后的表格里
      // 這個(gè)判斷是把合并的前幾行值省略,直接填原先最后行的值,合并了幾行,就省略幾行的值
      }
    }
}

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

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


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


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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/109697.html

相關(guān)文章

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

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

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

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

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

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

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

    摘要：最近項(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)渲染表頭。...

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

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

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

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

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

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

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

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

0條評(píng)論

閱讀需要支付1元查看
<