antdVue 合並a-table相同內容行的方法!(易出錯)


 {
          title: "核算項",
          dataIndex: "hesxName",
          key: "hesxName",
          align: "center",
          customRender: (text, record, index) => {
            const obj = {
              children: text !== null ? text : "",
              attrs: {},
            };
            obj.attrs.rowSpan = this.mergeCells(
              text,
              this.cacheData.snapshot,
              "hesxName",
              index
            );
            return obj;
          },
 mergeCells(text, data, key, index) {
      // 上一行該列數據是否一樣
      if (index !== 0 && text === data[index - 1][key]) {
        return 0;
      }
      let rowSpan = 1;
      // 判斷下一行是否相等
      for (let i = index + 1; i < data.length; i++) {
        if (text !== data[i][key]) {
          break;
        }
        rowSpan++;
      }
      return rowSpan;
    },

 上面是antdvue 1.0 版本;

 

二、antdv2.x 及antd3.1以下版本和1.x差不多,但是需要將attrs 改為 props ,如以下官網案例。

 

 

 三、antdvue 3.1 以上

 

 很明顯,3.1以上的版本,完全改變了字段,變成了customCell 而且里面參數也有了一定的變化,如上是參考,其中data.data是接口返回的table所有數據。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM