快捷導(dǎo)航

關(guān)于elementUi表格合并行數(shù)據(jù)并展示序號(hào)

更新時(shí)間：2023年04月25日 08:40:35 作者：小太陽...

這篇文章主要介紹了關(guān)于elementUi表格合并行數(shù)據(jù)并展示序號(hào),通過給table傳入span-method方法可以實(shí)現(xiàn)合并行或列，方法的參數(shù)是一個(gè)對(duì)象,感興趣的朋友可以學(xué)習(xí)一下

效果如下：屬于同一個(gè)廠商的數(shù)據(jù)要合并成一行

在這里插入圖片描述

element官網(wǎng)對(duì)于合并行和列是這樣說的：

通過給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ì)象。

實(shí)現(xiàn)合并行思路：需要一個(gè)數(shù)據(jù)來記錄需要合并的行數(shù)據(jù)（數(shù)字幾就代表合并幾行，比如 [1, 2, 0, 1]就是第一行第四行不變，第二三行合并成一行），還要有一個(gè)變量來記錄數(shù)組下標(biāo)。注意：后臺(tái)返回的數(shù)據(jù)一定要有能區(qū)分唯一性的數(shù)據(jù)，來判斷前后兩條數(shù)據(jù)是否一樣。主要代碼如下：

    <base-table
      :table-data="tableData"
      :table-title="tableTitle"
      :span-method="objectSpanMethod"
      max-height="600px"
      v-bind="$attrs"
    >
      <template slot-scope="scope" slot="serialNo">
        {{ scope.row.serialNo }}
      </template>
      ....
    </base-table>

const tableTitle = [
  {
    key: 'serialNo',
    title: '序號(hào)',
    align: 'center',
    width: '100',
    scopedSlots: { customRender: 'serialNo' }
  },
  {
    key: 'unionList',
    title: '廠商名稱(編號(hào))',
    align: 'center',
    width: '300px',
    scopedSlots: { customRender: 'unionList' }
  },
  {
    key: 'unionName',
    title: 'MQ廠商',
    tooltip: true,
    align: 'center'
  },
]
export default {
  data() {
    return {
      tableTitle,
      tableData: [],
      spanArr: [], // 存合并行數(shù)據(jù)的數(shù)組
      pos: 0,// 合并行數(shù)據(jù)數(shù)組下標(biāo)
      rowIndex: 1 // 序號(hào)
    }
  },

  methods: {
    getTableData() {
      this.tableData = [
        {
          accessId: '1',
          id: 1,
          mqPassword: '1011',
          privateKey: '1011',
          publicKey: '1011',
          unionList: "[{\"union_name\":\"樂樂\",\"union_id\":\"200160\"}]",
          unionName: '1011'
        },
        {
          accessId: '2',
          id: 2,
          mqPassword: '1012',
          privateKey: '1012',
          publicKey: '1012',
          unionList: "[{\"union_name\":\"小太陽\",\"union_id\":\"200734\"},{\"union_name\":\"包子\",\"union_id\":\"200737\"}]",
          unionName: '1012'
        },
        {
          accessId: '3',
          id: 3,
          mqPassword: '1013',
          privateKey: '1013',
          publicKey: '1013',
          unionList: "[{\"union_name\":\"小太陽\",\"union_id\":\"200734\"},{\"union_name\":\"包子\",\"union_id\":\"200737\"}]",
          unionName: '1013'
        },
        {
          accessId: '4',
          id: 4,
          mqPassword: '1014',
          privateKey: '1014',
          publicKey: '1014',
          unionList: "[{\"union_name\":\"測試\",\"union_id\":\"200160\"}]",
          unionName: '1014'
        },
      ]
      this.getSpanArr(this.tableData) // 獲取合并單元格數(shù)據(jù)和序號(hào)
    },
    getSpanArr(data) {
    // 重新查詢后，要清空行數(shù)據(jù)數(shù)組、序號(hào)重置為1
      this.spanArr = []
      this.rowIndex = 1
      // 遍歷數(shù)據(jù)，判斷前后兩條數(shù)據(jù)是否相同
      for (let i = 0; i < data.length; i++) {
        data[i].unionList = JSON.parse(data[i].unionList)
        data[i].unionArr = data[i].unionList.map(i => i.union_id).join(',')
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
          data[i].serialNo = this.rowIndex
          this.rowIndex++
        } else {
          // 判斷當(dāng)前元素與上一元素是否相同
          if (data[i].unionArr === data[i - 1].unionArr) {
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
            data[i].serialNo = this.rowIndex
            this.rowIndex ++
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 合并操作和廠商名稱
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        // rowspan和colspan都為0，則表示這一行不顯示，[x, 1]則表示合并了多少行
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
  }
}

到此這篇關(guān)于關(guān)于elementUi表格合并行數(shù)據(jù)并展示序號(hào)的文章就介紹到這了,更多相關(guān)elementUi表格合并內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: