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

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

1. npm install vxe-pc-ui@3.5.26 vxe-table@3.15.6

复制代码

1. // ...
2. import VxeUIAll from 'vxe-pc-ui'
3. import 'vxe-pc-ui/lib/style.css'
4. import VxeUITable from 'vxe-table'
5. import 'vxe-table/lib/style.css'
6. // ...
8. Vue.use(VxeUIAll)
9. Vue.use(VxeUITable)
10. // ...

复制代码

效果

代码

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

1. <template>
2.   
3.     <p>
4.       <vxe-button status="primary" @click="handleRowGroup(['date'])">设置date分组</vxe-button>
5.       <vxe-button status="primary" @click="handleRowGroup(['role'])">设置role分组</vxe-button>
6.       <vxe-button status="primary" @click="handleRowGroup(['role', 'date'])">设置role,date分组</vxe-button>
7.       <vxe-button @click="cancelRowGroup()">取消分组</vxe-button>
8.     </p>
10.     <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
11.   
12. </template>

复制代码

https://gitee.com/x-extends/vxe-table

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！