快捷導(dǎo)航

ElementUI實(shí)現(xiàn)el-table行列合并的操作步驟

更新時(shí)間：2024年08月28日 09:52:33 作者：繁依Fanyi

在前端開(kāi)發(fā)中,數(shù)據(jù)展示一直是一個(gè)重要的部分,而表格則是數(shù)據(jù)展示最常見(jiàn)的形式之一,ElementUI 是餓了么前端團(tuán)隊(duì)推出的一款基于 Vue 的 UI 組件庫(kù),其中的 el-table 組件是一個(gè)功能強(qiáng)大且靈活的表格組件,今天我們要詳細(xì)探討的是 el-table 的行列合并操作

初識(shí) el-table

el-table 是一個(gè)提供了豐富功能和極高定制性的表格組件。它不僅能展示常規(guī)的表格數(shù)據(jù)，還可以實(shí)現(xiàn)復(fù)雜的數(shù)據(jù)處理和展示需求，如排序、過(guò)濾、分頁(yè)、合并單元格等。而在實(shí)際開(kāi)發(fā)中，行列合并是一個(gè)非常實(shí)用的功能，尤其是在展示報(bào)表數(shù)據(jù)時(shí)，能夠極大地提升數(shù)據(jù)的可讀性和用戶(hù)體驗(yàn)。

el-table 的基本使用

在開(kāi)始討論行列合并之前，我們先簡(jiǎn)單了解一下 el-table 的基本使用方法。我們可以通過(guò) el-table 標(biāo)簽和 el-table-column 標(biāo)簽來(lái)定義一個(gè)表格。el-table 用于定義整個(gè)表格，而 el-table-column 用于定義表格中的每一列。

<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1517 弄'
      }]
    }
  }
}
</script>

行合并的實(shí)現(xiàn)

行合并是指將相同數(shù)據(jù)的相鄰行合并成一個(gè)單元格，這在數(shù)據(jù)表格中非常常見(jiàn)。ElementUI 通過(guò) span-method 屬性來(lái)實(shí)現(xiàn)行合并功能。span-method 是一個(gè)方法，用于設(shè)置單元格的 rowspan 和 colspan。該方法的返回值是一個(gè)包含 rowspan 和 colspan 的對(duì)象，通過(guò)它們可以控制單元格的合并。

下面是一個(gè)簡(jiǎn)單的示例，展示了如何實(shí)現(xiàn)行合并：

<template>
  <el-table
    :data="tableData"
    :span-method="arraySpanMethod"
    border
    style="width: 100%">
    <el-table-column prop="name" label="姓名" width="120"></el-table-column>
    <el-table-column prop="date" label="日期" width="120"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1517 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1519 弄'
      }]
    }
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  }
}
</script>

在這個(gè)例子中，我們定義了一個(gè) arraySpanMethod 方法，通過(guò)判斷行索引 rowIndex 是否為偶數(shù)來(lái)控制行合并。對(duì)于偶數(shù)行，我們返回 rowspan: 2，表示合并兩行；對(duì)于奇數(shù)行，我們返回 rowspan: 0，表示不顯示該單元格。

列合并的實(shí)現(xiàn)

列合并是指將相同數(shù)據(jù)的相鄰列合并成一個(gè)單元格，這在一些特定場(chǎng)景中也非常有用。列合并同樣是通過(guò) span-method 屬性來(lái)實(shí)現(xiàn)的。我們只需要在 span-method 方法中控制 colspan 的值即可。

下面是一個(gè)實(shí)現(xiàn)列合并的示例：

<template>
  <el-table
    :data="tableData"
    :span-method="objectSpanMethod"
    border
    style="width: 100%">
    <el-table-column prop="name" label="姓名" width="120"></el-table-column>
    <el-table-column prop="date" label="日期" width="120"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1517 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1519 弄'
      }]
    }
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        if (columnIndex === 1) {
          return {
            rowspan: 1,
            colspan: 2
          };
        }
        if (columnIndex === 2) {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  }
}
</script>

在這個(gè)例子中，我們同樣通過(guò) objectSpanMethod 方法來(lái)控制列合并。對(duì)于偶數(shù)行的第二列，我們返回 colspan: 2，表示合并兩列；對(duì)于第三列，我們返回 colspan: 0，表示不顯示該單元格。

行列合并的綜合實(shí)現(xiàn)

在實(shí)際開(kāi)發(fā)中，我們經(jīng)常需要同時(shí)實(shí)現(xiàn)行合并和列合并。下面是一個(gè)更復(fù)雜的示例，展示了如何同時(shí)實(shí)現(xiàn)行合并和列合并：

<template>
  <el-table
    :data="tableData"
    :span-method="combinedSpanMethod"
    border
    style="width: 100%">
    <el-table-column prop="name" label="姓名" width="120"></el-table-column>
    <el-table-column prop="date" label="日期" width="120"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1517 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區(qū)金沙江路 1519 弄'
      }]
    }
  },
  methods: {
    combinedSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
      if (rowIndex % 2 === 0) {
        if (columnIndex === 1) {
          return {
            rowspan: 1,
            colspan: 2
          };
        }
        if (columnIndex === 2) {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  }
}
</script>

在這個(gè)示例中，我們?cè)?nbsp;combinedSpanMethod 方法中同時(shí)控制了行合并和列合并。對(duì)于第一列的行合并邏輯保持不變，而對(duì)于第二列，我們?cè)黾恿肆泻喜⒌倪壿?，使其在滿(mǎn)足條件時(shí)合并兩列。

實(shí)踐中的應(yīng)用

在實(shí)際項(xiàng)目中，行列合并常用于展示統(tǒng)計(jì)數(shù)據(jù)或報(bào)表。例如，我們有一個(gè)展示銷(xiāo)售數(shù)據(jù)的表格，需要對(duì)相同日期的銷(xiāo)售記錄進(jìn)行合并。通過(guò)行列合并，可以使表格更加簡(jiǎn)潔明了，提升數(shù)據(jù)展示的效果。

<template>
  <el-table
    :data="salesData"
    :span-method="salesSpanMethod"
    border
    style="width: 100%">
    <el-table-column prop="date" label="日期" width="120"></el-table-column>
    <el-table-column prop="region" label="區(qū)域" width="120"></el-table-column>
    <el-table-column prop="sales" label="銷(xiāo)售額"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      salesData: [{
        date: '2023-01-01',
        region: '華東',
        sales: 1000
      }, {
        date: '2023-01-01',
        region: '華南',
        sales: 2000
      }, {
        date: '2023-01-02',
        region: '華東',
        sales: 1500
      }, {
        date: '2023-01-02',
        region: '華南',
        sales: 2500
      }]
    }
  },
  methods: {
    salesSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  }
}
</script>

在這個(gè)示例中，我們通過(guò) salesSpanMethod 方法實(shí)現(xiàn)了日期列的行合并，使得相同日期的銷(xiāo)售記錄合并在一起。這種方式不僅簡(jiǎn)化了表格的視覺(jué)效果，還提升了數(shù)據(jù)的可讀性。

更加復(fù)雜的合并邏輯

在某些情況下，我們可能需要更加復(fù)雜的合并邏輯。例如，根據(jù)多個(gè)條件進(jìn)行合并，或者在合并過(guò)程中動(dòng)態(tài)調(diào)整單元格的內(nèi)容。這時(shí)候，我們可以在 span-method 方法中編寫(xiě)更加靈活的邏輯。

<template>
  <el-table
    :data="complexData"
    :span-method="complexSpanMethod"
    border
    style="width: 100%">
    <el-table-column prop="category" label="分類(lèi)" width="120"></el-table-column>
    <el-table-column prop="subCategory" label="子分類(lèi)" width="120"></el-table-column>
    <el-table-column prop="item" label="項(xiàng)目"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      complexData: [{
        category: '水果',
        subCategory: '蘋(píng)果',
        item: '紅富士'
      }, {
        category: '水果',
        subCategory: '蘋(píng)果',
        item: '青蘋(píng)果'
      }, {
        category: '水果',
        subCategory: '橙子',
        item: '臍橙'
      }, {
        category: '蔬菜',
        subCategory: '葉菜',
        item: '菠菜'
      }, {
        category: '蔬菜',
        subCategory: '根莖',
        item: '胡蘿卜'
      }]
    }
  },
  methods: {
    complexSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0 || row.category !== this.complexData[rowIndex - 1].category) {
          let rowspan = 1;
          for (let i = rowIndex + 1; i < this.complexData.length; i++) {
            if (this.complexData[i].category === row.category) {
              rowspan++;
            } else {
              break;
            }
          }
          return {
            rowspan,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      } else if (columnIndex === 1) {
        if (rowIndex === 0 || row.subCategory !== this.complexData[rowIndex - 1].subCategory) {
          let rowspan = 1;
          for (let i = rowIndex + 1; i < this.complexData.length; i++) {
            if (this.complexData[i].subCategory === row.subCategory) {
              rowspan++;
            } else {
              break;
            }
          }
          return {
            rowspan,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  }
}
</script>

在這個(gè)示例中，我們通過(guò) complexSpanMethod 方法實(shí)現(xiàn)了基于分類(lèi)和子分類(lèi)的行合并。對(duì)于分類(lèi)列，我們遍歷數(shù)據(jù)，統(tǒng)計(jì)相同分類(lèi)的行數(shù)并進(jìn)行合并；對(duì)于子分類(lèi)列，我們也采用類(lèi)似的方法進(jìn)行合并。這樣可以靈活地處理更加復(fù)雜的合并需求。

結(jié)束語(yǔ)

ElementUI 的 el-table 組件為我們提供了強(qiáng)大的行列合并功能，通過(guò)靈活運(yùn)用 span-method 屬性，我們可以輕松實(shí)現(xiàn)各種復(fù)雜的表格合并需求。無(wú)論是簡(jiǎn)單的行合并、列合并，還是復(fù)雜的條件合并，el-table 都能游刃有余地應(yīng)對(duì)。

希望通過(guò)本文的詳細(xì)介紹，能夠幫助大家更好地理解和掌握 el-table 的行列合并功能。在實(shí)際開(kāi)發(fā)中，我們可以根據(jù)具體需求，靈活運(yùn)用這些技巧，為用戶(hù)提供更佳的數(shù)據(jù)展示效果。

以上就是ElementUI實(shí)現(xiàn)el-table行列合并的操作步驟的詳細(xì)內(nèi)容，更多關(guān)于ElementUI el-table行列合并的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: