司马黛 发表于 2025-6-6 09:55:43

vxe-table 使用行分组,对数据进行分组,指定多字段分组的使用

vxe-table 使用行分组,对数据进行分组,指定多字段分组的使用
查看官网:https://vxetable.cn
gitbub:https://github.com/x-extends/vxe-table
gitee:https://gitee.com/x-extends/vxe-table
安装

npm install vxe-pc-ui@3.5.26 vxe-table@3.15.6// ...
import VxeUIAll from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'
// ...

Vue.use(VxeUIAll)
Vue.use(VxeUITable)
// ...效果


代码

通过设置 row-group-config 行分组模式,通过参数 groupFields 或者调用 setRowGroups 方法就可以设置行分组
<template>

    <p>
      <vxe-button status="primary" @click="handleRowGroup(['date'])">设置date分组</vxe-button>
      <vxe-button status="primary" @click="handleRowGroup(['role'])">设置role分组</vxe-button>
      <vxe-button status="primary" @click="handleRowGroup(['role', 'date'])">设置role,date分组</vxe-button>
      <vxe-button @click="cancelRowGroup()">取消分组</vxe-button>
    </p>

    <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>

</template>https://gitee.com/x-extends/vxe-table

来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: vxe-table 使用行分组,对数据进行分组,指定多字段分组的使用