Vue使用vxe-table實(shí)現(xiàn)數(shù)據(jù)分組的三種方式
更新時(shí)間：2026年06月02日 09:38:43 作者：daols88
本文詳細(xì)介紹了vxe-table在分分展示分組數(shù)據(jù)時(shí)的三種模式：default、column和combined,這些模式可根據(jù)不同業(yè)務(wù)場(chǎng)景靈活切換,滿足不同展示需求,需要的朋友可以參考下
在表格中展示分組數(shù)據(jù)時(shí)，不同的業(yè)務(wù)場(chǎng)景需要不同的層級(jí)呈現(xiàn)方式。vxe-table 提供了三種靈活的分組展示模式，通過 aggregateConfig.mode 參數(shù)即可輕松切換。
指定列按層級(jí)展示
- 說明：默認(rèn)是參數(shù) aggregate-config.mode=default 是自定根據(jù)分組字段按層級(jí)展示分組，分組層級(jí)按照指定的 rowGroupNode 列來展開，分組的縮進(jìn)和樹形結(jié)構(gòu)展示在設(shè)置了 rowGroupNode: true 的列上。
- 適用場(chǎng)景：需要將分組標(biāo)識(shí)放在某個(gè)特定列（如名稱列），其他分組字段作為普通列展示。
<template>
<div>
<vxe-grid v-bind="gridOptions"></vxe-grid>
</div>
</template>
<script setup>
import { reactive } from 'vue'
const gridOptions = reactive({
height: 500,
showOverflow: true,
aggregateConfig: {
groupFields: ['role', 'date']
},
columns: [
{ type: 'seq', width: 70 },
{ field: 'name', title: 'Name', minWidth: 300, rowGroupNode: true },
{ field: 'role', title: 'Role' },
{ field: 'date', title: 'Date' },
{ field: 'sex', title: 'Sex' },
{ field: 'age', title: 'Age' },
{ field: 'address', title: 'Address' }
],
data: [
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Woman', age: 28, date: '2025-02-01', address: 'test abc' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Man', age: 22, date: '2025-01-01', address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Woman', age: 32, date: '2025-05-01', address: 'Shanghai' },
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Man', age: 32, date: '2025-01-01', address: 'test abc' },
{ id: 10005, name: 'Test5', role: 'Develop', sex: 'Man', age: 30, date: '2025-01-01', address: 'Shanghai' },
{ id: 10006, name: 'Test6', role: 'Designer', sex: 'Man', age: 30, date: '2025-03-01', address: 'test abc' },
{ id: 10007, name: 'Test7', role: 'Test', sex: 'Woman', age: 29, date: '2025-05-01', address: 'test abc' },
{ id: 10008, name: 'Test8', role: 'PM', sex: 'Woman', age: 35, date: '2025-11-01', address: 'test abc' },
{ id: 10009, name: 'Test9', role: 'Test', sex: 'Man', age: 21, date: '2025-05-01', address: 'test abc' },
{ id: 10010, name: 'Test10', role: 'PM', sex: 'Woman', age: 28, date: '2025-03-01', address: 'test abc' },
{ id: 10011, name: 'Test11', role: 'Test', sex: 'Woman', age: 29, date: '2025-03-01', address: 'test abc' },
{ id: 10012, name: 'Test12', role: 'Develop', sex: 'Man', age: 37, date: '2025-10-01', address: 'test abc' },
{ id: 10013, name: 'Test13', role: 'Test', sex: 'Woman', age: 24, date: '2025-02-01', address: 'test abc' },
{ id: 10014, name: 'Test14', role: 'Develop', sex: 'Man', age: 34, date: '2025-08-01', address: 'test abc' },
{ id: 10015, name: 'Test15', role: 'Designer', sex: 'Man', age: 21, date: '2025-05-01', address: 'test abc' },
{ id: 10016, name: 'Test16', role: 'Designer', sex: 'Woman', age: 21, date: '2025-10-01', address: 'test abc' },
{ id: 10017, name: 'Test17', role: 'Test', sex: 'Man', age: 31, date: '2025-12-01', address: 'test abc' },
{ id: 10018, name: 'Test18', role: 'Develop', sex: 'Woman', age: 32, date: '2025-10-01', address: 'test abc' },
{ id: 10019, name: 'Test19', role: 'Test', sex: 'Man', age: 37, date: '2025-02-01', address: 'test abc' },
{ id: 10020, name: 'Test20', role: 'Develop', sex: 'Man', age: 41, date: '2025-03-01', address: 'test abc' }
]
})
</script>
自動(dòng)按列位置來展示層級(jí)
- 說明：通過 aggregate-config.mode=column 設(shè)置為自動(dòng)根據(jù)分組字段鎖對(duì)應(yīng)的列來展示層級(jí)關(guān)系，分組層級(jí)自動(dòng)與 groupFields 中字段的列位置對(duì)齊——每個(gè)分組字段獨(dú)立占一列，并在該列內(nèi)展示對(duì)應(yīng)的分組縮進(jìn)。無需設(shè)置 rowGroupNode。
- 適用場(chǎng)景：希望分組字段列本身就能體現(xiàn)層級(jí)關(guān)系，直觀看到“角色 → 日期”的樹形結(jié)構(gòu)。
<template>
<div>
<vxe-grid v-bind="gridOptions"></vxe-grid>
</div>
</template>
<script setup>
import { reactive } from 'vue'
const gridOptions = reactive({
height: 500,
border: true,
showOverflow: true,
aggregateConfig: {
mode: 'column',
groupFields: ['role', 'date']
},
columns: [
{ type: 'seq', width: 70 },
{ field: 'role', title: 'Role', width: 180 },
{ field: 'date', title: 'Date', width: 180 },
{ field: 'name', title: 'Name' },
{ field: 'sex', title: 'Sex' },
{ field: 'age', title: 'Age' },
{ field: 'address', title: 'Address' }
],
data: [
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Woman', age: 28, date: '2025-02-01', address: 'test abc' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Man', age: 22, date: '2025-01-01', address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Woman', age: 32, date: '2025-05-01', address: 'Shanghai' },
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Man', age: 32, date: '2025-01-01', address: 'test abc' },
{ id: 10005, name: 'Test5', role: 'Develop', sex: 'Man', age: 30, date: '2025-01-01', address: 'Shanghai' },
{ id: 10006, name: 'Test6', role: 'Designer', sex: 'Man', age: 30, date: '2025-03-01', address: 'test abc' },
{ id: 10007, name: 'Test7', role: 'Test', sex: 'Woman', age: 29, date: '2025-05-01', address: 'test abc' },
{ id: 10008, name: 'Test8', role: 'PM', sex: 'Woman', age: 35, date: '2025-11-01', address: 'test abc' },
{ id: 10009, name: 'Test9', role: 'Test', sex: 'Man', age: 21, date: '2025-05-01', address: 'test abc' },
{ id: 10010, name: 'Test10', role: 'PM', sex: 'Woman', age: 28, date: '2025-03-01', address: 'test abc' },
{ id: 10011, name: 'Test11', role: 'Test', sex: 'Woman', age: 29, date: '2025-03-01', address: 'test abc' },
{ id: 10012, name: 'Test12', role: 'Develop', sex: 'Man', age: 37, date: '2025-10-01', address: 'test abc' },
{ id: 10013, name: 'Test13', role: 'Test', sex: 'Woman', age: 24, date: '2025-02-01', address: 'test abc' },
{ id: 10014, name: 'Test14', role: 'Develop', sex: 'Man', age: 34, date: '2025-08-01', address: 'test abc' },
{ id: 10015, name: 'Test15', role: 'Designer', sex: 'Man', age: 21, date: '2025-05-01', address: 'test abc' },
{ id: 10016, name: 'Test16', role: 'Designer', sex: 'Woman', age: 21, date: '2025-10-01', address: 'test abc' },
{ id: 10017, name: 'Test17', role: 'Test', sex: 'Man', age: 31, date: '2025-12-01', address: 'test abc' },
{ id: 10018, name: 'Test18', role: 'Develop', sex: 'Woman', age: 32, date: '2025-10-01', address: 'test abc' },
{ id: 10019, name: 'Test19', role: 'Test', sex: 'Man', age: 37, date: '2025-02-01', address: 'test abc' },
{ id: 10020, name: 'Test20', role: 'Develop', sex: 'Man', age: 41, date: '2025-03-01', address: 'test abc' }
]
})
</script>
合并為一組進(jìn)行展示
- 說明：通過 aggregate-config.mode=combined 設(shè)置將多個(gè)分組字段合并為一組進(jìn)行展示，將所有分組字段合并為“一個(gè)分組節(jié)點(diǎn)”進(jìn)行展示，不拆分多個(gè)層級(jí)。分組節(jié)點(diǎn)的標(biāo)題由所有分組字段的值拼接而成
- 用場(chǎng)景：不關(guān)心多層級(jí)的內(nèi)部結(jié)構(gòu)，只需要把符合某組字段值組合的數(shù)據(jù)歸為一個(gè)組即可。
<template>
<div>
<vxe-grid v-bind="gridOptions"></vxe-grid>
</div>
</template>
<script setup>
import { reactive } from 'vue'
const gridOptions = reactive({
height: 500,
border: true,
showOverflow: true,
aggregateConfig: {
mode: 'combined',
groupFields: ['role', 'date']
},
columns: [
{ type: 'seq', width: 70 },
{ field: 'name', title: 'Name', minWidth: 300, rowGroupNode: true },
{ field: 'role', title: 'Role' },
{ field: 'date', title: 'Date' },
{ field: 'sex', title: 'Sex' },
{ field: 'age', title: 'Age' },
{ field: 'address', title: 'Address' }
],
data: [
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Woman', age: 28, date: '2025-02-01', address: 'test abc' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Man', age: 22, date: '2025-01-01', address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Woman', age: 32, date: '2025-05-01', address: 'Shanghai' },
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Man', age: 32, date: '2025-01-01', address: 'test abc' },
{ id: 10005, name: 'Test5', role: 'Develop', sex: 'Man', age: 30, date: '2025-01-01', address: 'Shanghai' },
{ id: 10006, name: 'Test6', role: 'Designer', sex: 'Man', age: 30, date: '2025-03-01', address: 'test abc' },
{ id: 10007, name: 'Test7', role: 'Test', sex: 'Woman', age: 29, date: '2025-05-01', address: 'test abc' },
{ id: 10008, name: 'Test8', role: 'PM', sex: 'Woman', age: 35, date: '2025-11-01', address: 'test abc' },
{ id: 10009, name: 'Test9', role: 'Test', sex: 'Man', age: 21, date: '2025-05-01', address: 'test abc' },
{ id: 10010, name: 'Test10', role: 'PM', sex: 'Woman', age: 28, date: '2025-03-01', address: 'test abc' },
{ id: 10011, name: 'Test11', role: 'Test', sex: 'Woman', age: 29, date: '2025-03-01', address: 'test abc' },
{ id: 10012, name: 'Test12', role: 'Develop', sex: 'Man', age: 37, date: '2025-10-01', address: 'test abc' },
{ id: 10013, name: 'Test13', role: 'Test', sex: 'Woman', age: 24, date: '2025-02-01', address: 'test abc' },
{ id: 10014, name: 'Test14', role: 'Develop', sex: 'Man', age: 34, date: '2025-08-01', address: 'test abc' },
{ id: 10015, name: 'Test15', role: 'Designer', sex: 'Man', age: 21, date: '2025-05-01', address: 'test abc' },
{ id: 10016, name: 'Test16', role: 'Designer', sex: 'Woman', age: 21, date: '2025-10-01', address: 'test abc' },
{ id: 10017, name: 'Test17', role: 'Test', sex: 'Man', age: 31, date: '2025-12-01', address: 'test abc' },
{ id: 10018, name: 'Test18', role: 'Develop', sex: 'Woman', age: 32, date: '2025-10-01', address: 'test abc' },
{ id: 10019, name: 'Test19', role: 'Test', sex: 'Man', age: 37, date: '2025-02-01', address: 'test abc' },
{ id: 10020, name: 'Test20', role: 'Develop', sex: 'Man', age: 41, date: '2025-03-01', address: 'test abc' }
]
})
</script>
模式對(duì)比一覽
| 模式 | mode 值 | 層級(jí)展示位置 | 是否需要 rowGroupNode | 典型效果 |
|---|---|---|---|---|
| 指定列層級(jí) | ‘default’ | 固定在某列（如 name 列） | 是 | 分組縮進(jìn)集中在單一列，其他分組字段平鋪 |
| 按列位置層級(jí) | ‘column’ | 分別在各個(gè)分組字段列 | 否 | 每個(gè)分組字段列獨(dú)立展示自己的層級(jí) |
| 合并展示 | ‘combined’ | 固定在某列，但分組節(jié)點(diǎn)合并 | 是 | 所有分組字段值拼接成一個(gè)節(jié)點(diǎn)，無嵌套 |
到此這篇關(guān)于Vue使用vxe-table實(shí)現(xiàn)數(shù)據(jù)分組的三種方式的文章就介紹到這了,更多相關(guān)Vue vxe-table數(shù)據(jù)分組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
當(dāng)vue使用庫中的getvalue方法時(shí)，需要調(diào)用相關(guān)方法，通過定義ref=“”，使用this.$refs.exampleEditor._setValue('')，具體示例代碼參考下本文，對(duì)vue使用引用庫中的方法，感興趣的朋友一起看看吧2021-07-07
el-table實(shí)現(xiàn)搜索高亮展示并滾動(dòng)到元素位置的操作代碼
這篇文章主要介紹了el-table實(shí)現(xiàn)搜索高亮展示并滾動(dòng)到元素位置,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
日常開發(fā)中除了直接在input標(biāo)簽上使用v-model指令外,封裝的組件也需要v-model,下面這篇文章主要給大家介紹了關(guān)于Vue自定義組件中v-model使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
這篇文章主要介紹了仿vue-cli搭建屬于自己的腳手架的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vuex2中使用mapGetters/mapActions報(bào)錯(cuò)的解決方法
這篇文章主要介紹了vuex2中使用mapGetters/mapActions報(bào)錯(cuò)解決方法 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-10-10
Vue實(shí)現(xiàn)按鈕旋轉(zhuǎn)和移動(dòng)位置的實(shí)例代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)按鈕旋轉(zhuǎn)和移動(dòng)位置的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08
vue項(xiàng)目中vue-echarts講解及常用圖表實(shí)現(xiàn)方案(推薦)
這篇文章主要介紹了vue項(xiàng)目中vue-echarts講解及常用圖表方案實(shí)現(xiàn),主要針對(duì)代碼示例中的內(nèi)容進(jìn)行問題講解，詳細(xì)代碼在文章中給大家提到，需要的朋友可以參考下2022-09-09
這篇文章主要為大家介紹了vue組合式API淺顯入門示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要為大家介紹了vue3使用Facebook嵌入式視頻播放器API方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
詳解VScode編輯器vue環(huán)境搭建所遇問題解決方案
這篇文章主要介紹了VScode編輯器vue環(huán)境搭建所遇問題解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04