快捷導(dǎo)航

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

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

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

初識 el-table

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

el-table 的基本使用

在開始討論行列合并之前，我們先簡單了解一下 el-table 的基本使用方法。我們可以通過 el-table 標簽和 el-table-column 標簽來定義一個表格。el-table 用于定義整個表格，而 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>

行合并的實現(xiàn)

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

下面是一個簡單的示例，展示了如何實現(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>

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

列合并的實現(xiàn)

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

下面是一個實現(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>

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

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

在實際開發(fā)中，我們經(jīng)常需要同時實現(xiàn)行合并和列合并。下面是一個更復(fù)雜的示例，展示了如何同時實現(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>

在這個示例中，我們在 combinedSpanMethod 方法中同時控制了行合并和列合并。對于第一列的行合并邏輯保持不變，而對于第二列，我們增加了列合并的邏輯，使其在滿足條件時合并兩列。

實踐中的應(yīng)用

在實際項目中，行列合并常用于展示統(tǒng)計數(shù)據(jù)或報表。例如，我們有一個展示銷售數(shù)據(jù)的表格，需要對相同日期的銷售記錄進行合并。通過行列合并，可以使表格更加簡潔明了，提升數(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="銷售額"></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>

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

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

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

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

<script>
export default {
  data() {
    return {
      complexData: [{
        category: '水果',
        subCategory: '蘋果',
        item: '紅富士'
      }, {
        category: '水果',
        subCategory: '蘋果',
        item: '青蘋果'
      }, {
        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>

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