欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Element?UI中table單元格合并的解決過程

 更新時間:2022年08月25日 11:48:12   作者:beijixing333y  
element?ui中的table表格數(shù)據(jù)是動態(tài)生成的,最近遇到個需求,要求我們對單元格進行合并,所以下面這篇文章主要給大家介紹了關(guān)于Element?UI中table單元格合并的解決過程,需要的朋友可以參考下

引言

項目中遇到表格單元格合并的需求,在此記錄整個解決過程。

項目使用的是 Element UI,表格使用的是 table 組件。Element UI 的 table 表格組件中對單元格進行合并,需要使用 table 組件的 span-method 屬性。

先看一張成果圖(完整代碼放在末尾):

解決思路:

1、格式化后臺返回的數(shù)據(jù)(根據(jù)實際數(shù)據(jù)格式處理)

項目后臺返回的數(shù)據(jù)格式為樹形結(jié)構(gòu),這里做簡化展示:

[
  {
    'column1': '111',
    'column2': '222',
    'column3': '333',
    'children1': [
      {
        'column6': 666,
        'column4': '4440',
        'column5': '5550',
        'children2': [
          {
            'column7': '77701',
            'column8': '88801',
            'column9': '99901'
          }
        ]
      }
    ]
  }
]

需要先將樹結(jié)構(gòu)數(shù)據(jù)轉(zhuǎn)為一維數(shù)組:

// table 表格數(shù)據(jù)初始化處理,將樹結(jié)構(gòu)數(shù)據(jù)轉(zhuǎn)為一維數(shù)組
    handleData(data, parentId) {
      data.map((res, index) => {
        var obj = {
          id: parentId
        }
        for (const key in res) {
          const isarr = Object.values(res).find((age) => {
            return Array.isArray(age)
          })
          if (isarr) {
            if (Array.isArray(res[key])) {
              for (let i = 0; i < res[key].length; i++) {
                Object.assign(obj, res[key][i])
                data.push(obj)
                res[key].splice(i, 1)
                if (res[key].length === 0) {
                  data.splice(index, 1)
                }
                this.handleData(data, parentId)
              }
            } else {
              Object.assign(obj, { [key]: res[key] })
            }
          }
        }
      })
      return data
    }

因為后臺返回的數(shù)據(jù)里沒有唯一標(biāo)識符,所以需要單獨添加一個唯一標(biāo)識表示轉(zhuǎn)換為一維數(shù)組的數(shù)據(jù)是出自同一組樹結(jié)構(gòu)里。故此處在展開時單獨加了一個 id 屬性,用來代替唯一標(biāo)識。如果后臺返回的數(shù)據(jù)格式就是一個一維數(shù)組,可跳過數(shù)據(jù)格式化步驟。

2、在 data 中定義數(shù)據(jù),需要合并幾列就定義幾個數(shù)組和索引

  data() {
    return {
      tableData: [],
      // 合并單元格
      column1Arr: [], // column1
      column1Index: 0, // column1索引
      column2Arr: [], // column2
      column2Index: 0, // column2索引
      column3Arr: [], // column3
      column3Index: 0, // column3索引
      column4Arr: [], // column4
      column4Index: 0, // column4
      column5Arr: [], // column5
      column5Index: 0, // column5索引
      column6Arr: [], // column6
      column6Index: 0 // column6索引
    }
  }

3、定義合并函數(shù)

以第一行為基準(zhǔn),一層層對比,參數(shù) data 就是格式化以后的表格數(shù)據(jù),以每個數(shù)據(jù)里的唯一標(biāo)識 id 作為合并的參照字段:

    // 初始化合并行數(shù)組
    mergeInit() {
      this.column1Arr = [] // column1
      this.column1Index = 0 // column1索引
      this.column2Arr = [] // column2
      this.column2Index = 0 // column2索引
      this.column3Arr = [] // column3
      this.column3Index = 0 // column3索引
      this.column4Arr = [] // column4
      this.column4Index = 0 // column4索引
      this.column5Arr = [] // column5
      this.column5Index = 0 // column5索引
      this.column6Arr = [] // column6
      this.column6Index = 0 // column6索引
    },
    // 合并表格
    mergeTable(data) {
      this.mergeInit()
      if (data.length > 0) {
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            // 第一行必須存在,以第一行為基準(zhǔn)
            this.column1Arr.push(1) // column1
            this.column1Index = 0
 
            this.column2Arr.push(1) // column2
            this.column2Index = 0
 
            this.column3Arr.push(1) // column3
            this.column3Index = 0
 
            this.column4Arr.push(1) // column4
            this.column4Index = 0
 
            this.column5Arr.push(1) // column5
            this.column5Index = 0
 
            this.column6Arr.push(1) // column6
            this.column6Index = 0
          } else {
            // 判斷當(dāng)前元素與上一元素是否相同
            // column1
            if (
              data[i].column1 === data[i - 1].column1 &&
              data[i].id === data[i - 1].id
            ) {
              this.column1Arr[this.column1Index] += 1
              this.column1Arr.push(0)
            } else {
              this.column1Arr.push(1)
              this.column1Index = i
            }
 
            // column2
            if (
              data[i].column2 === data[i - 1].column2 &&
              data[i].id === data[i - 1].id
            ) {
              this.column2Arr[this.column2Index] += 1
              this.column2Arr.push(0)
            } else {
              this.column2Arr.push(1)
              this.column2Index = i
            }
 
            // column3
            if (
              data[i].column3 === data[i - 1].column3 &&
              data[i].id === data[i - 1].id
            ) {
              this.column3Arr[this.column3Index] += 1
              this.column3Arr.push(0)
            } else {
              this.column3Arr.push(1)
              this.column3Index = i
            }
 
            // column4
            if (
              data[i].column4 === data[i - 1].column4 &&
              data[i].id === data[i - 1].id
            ) {
              this.column4Arr[this.column4Index] += 1
              this.column4Arr.push(0)
            } else {
              this.column4Arr.push(1)
              this.column4Index = i
            }
 
            // column5
            if (
              data[i].column5 === data[i - 1].column5 &&
              data[i].column4 === data[i - 1].column4 &&
              data[i].id === data[i - 1].id
            ) {
              this.column5Arr[this.column5Index] += 1
              this.column5Arr.push(0)
            } else {
              this.column5Arr.push(1)
              this.column5Index = i
            }
 
            // column6
            if (
              data[i].column6 === data[i - 1].column6 &&
              data[i].column4 === data[i - 1].column4 &&
              data[i].id === data[i - 1].id
            ) {
              this.column6Arr[this.column6Index] += 1
              this.column6Arr.push(0)
            } else {
              this.column6Arr.push(1)
              this.column6Index = i
            }
          }
        }
      }
    },

注意,同一組數(shù)據(jù)里可能會有多個  children1 或者 children2,這時合并的時候會有多個條件進行判斷:

4、table 組件屬性 span-method 的單元格合并方法:

    handleSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        // 第一列 column1
        const _row_1 = this.column1Arr[rowIndex]
        const _col_1 = _row_1 > 0 ? 1 : 0
        return {
          rowspan: _row_1,
          colspan: _col_1
        }
      } else if (columnIndex === 2) {
        // 第二列 column2
        const _row_2 = this.column2Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 3) {
        // 第三列 column3
        const _row_2 = this.column3Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 4) {
        // 第四列 column4
        const _row_2 = this.column4Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 5) {
        // 第五列 column5
        const _row_2 = this.column5Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 6) {
        // 第六列 column6
        const _row_2 = this.column6Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      }
    }

至此,整個單元格合并就完成了!

如果覺得寫得還不錯,還請點贊支持,感謝感謝感謝!?。?/p>

完整代碼:

<template>
  <div class="table-wrap">
    <el-table
      :data="tableData"
      :span-method="handleSpanMethod"
      :cell-style="{ background: '#FFFFFF' }"
      border
      style="width: 100%"
    >
      <el-table-column prop="id" label="序號" align="center" width="80">
        <template slot-scope="scope">
          {{ scope.row.id + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="column1" label="column1" align="center" />
      <el-table-column prop="column2" label="column2" align="center" />
      <el-table-column prop="column3" label="column3" align="center" />
      <el-table-column prop="column4" label="column4" align="center" />
      <el-table-column prop="column5" label="column5" align="center" />
      <el-table-column prop="column6" label="column6" align="center" />
      <el-table-column prop="column7" label="column7" align="center" />
      <el-table-column prop="column8" label="column8" align="center" />
      <el-table-column prop="column9" label="column9" align="center" />
    </el-table>
  </div>
</template>
 
<script>
export default {
  name: 'CellMerge',
  data() {
    return {
      tableData: [],
      // 合并單元格
      column1Arr: [], // column1
      column1Index: 0, // column1索引
      column2Arr: [], // column2
      column2Index: 0, // column2索引
      column3Arr: [], // column3
      column3Index: 0, // column3索引
      column4Arr: [], // column4
      column4Index: 0, // column4
      column5Arr: [], // column5
      column5Index: 0, // column5索引
      column6Arr: [], // column6
      column6Index: 0 // column6索引
    }
  },
  mounted() {
    this.initTableData()
  },
  methods: {
    // 初始化表格數(shù)據(jù)
    initTableData() {
      const newTableData = [
        {
          'column1': '111',
          'column2': '222',
          'column3': '333',
          'children1': [
            {
              'column6': 666,
              'column4': '4440',
              'column5': '5550',
              'children2': [
                {
                  'column7': '77701',
                  'column8': '88801',
                  'column9': '99901'
                },
                {
                  'column7': '77702',
                  'column8': '88802',
                  'column9': '99902'
                },
                {
                  'column7': '77703',
                  'column8': '88803',
                  'column9': '99903'
                }
              ]
            },
            {
              'column6': 666,
              'column4': '4441',
              'column5': '5551',
              'children2': [
                {
                  'column7': '77711',
                  'column8': '88811',
                  'column9': '99911'
                }
              ]
            },
            {
              'column6': 666,
              'column4': '4442',
              'column5': '5552',
              'children2': [
                {
                  'column7': '77721',
                  'column8': '88821',
                  'column9': '99921'
                },
                {
                  'column7': '77722',
                  'column8': '88822',
                  'column9': '99922'
                }
              ]
            }
          ]
        },
        {
          'column1': '111',
          'column2': '222',
          'column3': '333',
          'children1': [
            {
              'column6': 666,
              'column4': '4440',
              'column5': '5550',
              'children2': [
                {
                  'column7': '77701',
                  'column8': '88801',
                  'column9': '99901'
                }
              ]
            },
            {
              'column6': 666,
              'column4': '4441',
              'column5': '5551',
              'children2': [
                {
                  'column7': '77711',
                  'column8': '88811',
                  'column9': '99911'
                },
                {
                  'column7': '77712',
                  'column8': '88812',
                  'column9': '99912'
                }
              ]
            }
          ]
        },
        {
          'column1': '111',
          'column2': '222',
          'column3': '333',
          'children1': [
            {
              'column6': 666,
              'column4': '4440',
              'column5': '5550',
              'children2': [
                {
                  'column7': '77701',
                  'column8': '88801',
                  'column9': '99901'
                },
                {
                  'column7': '77702',
                  'column8': '88802',
                  'column9': '99902'
                },
                {
                  'column7': '77703',
                  'column8': '88803',
                  'column9': '99903'
                }
              ]
            },
            {
              'column6': 666,
              'column4': '4441',
              'column5': '5551',
              'children2': [
                {
                  'column7': '77711',
                  'column8': '88811',
                  'column9': '99911'
                }
              ]
            }
          ]
        }
      ]
      this.tableData = []
      newTableData.map((res, index) => {
        const parentId = index
        this.tableData.push.apply(
          this.tableData,
          this.handleData([res], parentId)
        )
      })
      this.mergeTable(this.tableData)
    },
    // table 表格數(shù)據(jù)初始化處理,將樹結(jié)構(gòu)數(shù)據(jù)轉(zhuǎn)為一維數(shù)組
    handleData(data, parentId) {
      data.map((res, index) => {
        var obj = {
          id: parentId
        }
        for (const key in res) {
          const isarr = Object.values(res).find((age) => {
            return Array.isArray(age)
          })
          if (isarr) {
            if (Array.isArray(res[key])) {
              for (let i = 0; i < res[key].length; i++) {
                Object.assign(obj, res[key][i])
                data.push(obj)
                res[key].splice(i, 1)
                if (res[key].length === 0) {
                  data.splice(index, 1)
                }
                this.handleData(data, parentId)
              }
            } else {
              Object.assign(obj, { [key]: res[key] })
            }
          }
        }
      })
      return data
    },
    // 初始化合并行數(shù)組
    mergeInit() {
      this.column1Arr = [] // column1
      this.column1Index = 0 // column1索引
      this.column2Arr = [] // column2
      this.column2Index = 0 // column2索引
      this.column3Arr = [] // column3
      this.column3Index = 0 // column3索引
      this.column4Arr = [] // column4
      this.column4Index = 0 // column4索引
      this.column5Arr = [] // column5
      this.column5Index = 0 // column5索引
      this.column6Arr = [] // column6
      this.column6Index = 0 // column6索引
    },
    // 合并表格
    mergeTable(data) {
      this.mergeInit()
      if (data.length > 0) {
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            // 第一行必須存在,以第一行為基準(zhǔn)
            this.column1Arr.push(1) // column1
            this.column1Index = 0
 
            this.column2Arr.push(1) // column2
            this.column2Index = 0
 
            this.column3Arr.push(1) // column3
            this.column3Index = 0
 
            this.column4Arr.push(1) // column4
            this.column4Index = 0
 
            this.column5Arr.push(1) // column5
            this.column5Index = 0
 
            this.column6Arr.push(1) // column6
            this.column6Index = 0
          } else {
            // 判斷當(dāng)前元素與上一元素是否相同
            // column1
            if (
              data[i].column1 === data[i - 1].column1 &&
              data[i].id === data[i - 1].id
            ) {
              this.column1Arr[this.column1Index] += 1
              this.column1Arr.push(0)
            } else {
              this.column1Arr.push(1)
              this.column1Index = i
            }
 
            // column2
            if (
              data[i].column2 === data[i - 1].column2 &&
              data[i].id === data[i - 1].id
            ) {
              this.column2Arr[this.column2Index] += 1
              this.column2Arr.push(0)
            } else {
              this.column2Arr.push(1)
              this.column2Index = i
            }
 
            // column3
            if (
              data[i].column3 === data[i - 1].column3 &&
              data[i].id === data[i - 1].id
            ) {
              this.column3Arr[this.column3Index] += 1
              this.column3Arr.push(0)
            } else {
              this.column3Arr.push(1)
              this.column3Index = i
            }
 
            // column4
            if (
              data[i].column4 === data[i - 1].column4 &&
              data[i].id === data[i - 1].id
            ) {
              this.column4Arr[this.column4Index] += 1
              this.column4Arr.push(0)
            } else {
              this.column4Arr.push(1)
              this.column4Index = i
            }
 
            // column5
            if (
              data[i].column5 === data[i - 1].column5 &&
              data[i].column4 === data[i - 1].column4 &&
              data[i].id === data[i - 1].id
            ) {
              this.column5Arr[this.column5Index] += 1
              this.column5Arr.push(0)
            } else {
              this.column5Arr.push(1)
              this.column5Index = i
            }
 
            // column6
            if (
              data[i].column6 === data[i - 1].column6 &&
              data[i].column4 === data[i - 1].column4 &&
              data[i].id === data[i - 1].id
            ) {
              this.column6Arr[this.column6Index] += 1
              this.column6Arr.push(0)
            } else {
              this.column6Arr.push(1)
              this.column6Index = i
            }
          }
        }
      }
    },
    handleSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        // 第一列 column1
        const _row_1 = this.column1Arr[rowIndex]
        const _col_1 = _row_1 > 0 ? 1 : 0
        return {
          rowspan: _row_1,
          colspan: _col_1
        }
      } else if (columnIndex === 2) {
        // 第二列 column2
        const _row_2 = this.column2Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 3) {
        // 第三列 column3
        const _row_2 = this.column3Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 4) {
        // 第四列 column4
        const _row_2 = this.column4Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 5) {
        // 第五列 column5
        const _row_2 = this.column5Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      } else if (columnIndex === 6) {
        // 第六列 column6
        const _row_2 = this.column6Arr[rowIndex]
        const _col_2 = _row_2 > 0 ? 1 : 0
        return {
          rowspan: _row_2,
          colspan: _col_2
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .table-wrap {
    width: 100%;
    height: 100%;
    padding: 20px;
  }
</style>

總結(jié)

到此這篇關(guān)于Element UI中table單元格合并的文章就介紹到這了,更多相關(guān)Element UI table單元格合并內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 詳細聊聊vue組件是如何實現(xiàn)組件通訊的

    詳細聊聊vue組件是如何實現(xiàn)組件通訊的

    組件間通信簡單來說就是組件間進行數(shù)據(jù)傳遞,就像我們?nèi)粘5拇螂娫?就是通訊的一種方式,下面這篇文章主要給大家介紹了關(guān)于vue組件是如何實現(xiàn)組件通訊的相關(guān)資料,需要的朋友可以參考下
    2022-05-05
  • vue使用高德地圖實現(xiàn)添加點標(biāo)記和獲取點擊位置信息的示例代碼

    vue使用高德地圖實現(xiàn)添加點標(biāo)記和獲取點擊位置信息的示例代碼

    這篇文章主要介紹了vue使用高德地圖實現(xiàn)添加點標(biāo)記和獲取點擊位置信息的示例代碼,文中補充介紹了高德vue-amap使用(一)標(biāo)記點位獲取地址及經(jīng)緯度,本文結(jié)合示例代碼給大家介紹的非常詳細,需要的朋友參考下吧
    2024-01-01
  • vue?使用addRoutes動態(tài)添加路由及刷新頁面跳轉(zhuǎn)404路由的問題解決方案

    vue?使用addRoutes動態(tài)添加路由及刷新頁面跳轉(zhuǎn)404路由的問題解決方案

    我自己使用addRoutes動態(tài)添加的路由頁面,使用router-link標(biāo)簽可以跳轉(zhuǎn),但是一刷新就會自動跳轉(zhuǎn)到我定義的通配符?*?指向的404路由頁面,這說明沒有找到指定路由才跳到404路由的,這樣的情況如何處理呢,下面小編給大家分享解決方案,一起看看吧
    2023-10-10
  • vue自定義數(shù)字輸入框組件

    vue自定義數(shù)字輸入框組件

    這篇文章主要為大家詳細介紹了vue自定義數(shù)字輸入框組件,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-06-06
  • 詳解nuxt sass全局變量(公共scss解決方案)

    詳解nuxt sass全局變量(公共scss解決方案)

    這篇文章主要介紹了詳解nuxt sass全局變量(公共scss解決方案),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-06-06
  • vue2過濾器模糊查詢方法

    vue2過濾器模糊查詢方法

    今天小編就為大家分享一篇vue2過濾器模糊查詢方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • 利用vue開發(fā)一個所謂的數(shù)獨方法實例

    利用vue開發(fā)一個所謂的數(shù)獨方法實例

    數(shù)獨是源自18世紀(jì)瑞士的一種數(shù)學(xué)游戲,是一種運用紙、筆進行演算的邏輯游戲。下面這篇文章主要給大家介紹了關(guān)于利用vue開發(fā)一個所謂的數(shù)獨的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下。
    2017-12-12
  • 如何解決Vue請求接口出現(xiàn)跨域問題Access-Control-Allow-Origin

    如何解決Vue請求接口出現(xiàn)跨域問題Access-Control-Allow-Origin

    這篇文章主要介紹了如何解決Vue請求接口出現(xiàn)跨域問題Access-Control-Allow-Origin,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue中img標(biāo)簽的src屬性總結(jié)(問題解決)

    vue中img標(biāo)簽的src屬性總結(jié)(問題解決)

    初步接觸vue框架時,好多朋友使用img標(biāo)簽時,設(shè)置動態(tài)src屬性時,可能都會遇到路徑不生效的問題,本文給大家介紹vue中img標(biāo)簽的src屬性總結(jié),感興趣的朋友一起看看吧
    2023-11-11
  • vue實現(xiàn)引入本地json的方法分析

    vue實現(xiàn)引入本地json的方法分析

    這篇文章主要介紹了vue實現(xiàn)引入本地json的方法,結(jié)合實例形式分析了vue.js加載本地json文件及解析json數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下
    2018-07-07

最新評論