vxe-grid proxy pager 数据代理分页、自定义分页、自定义返回数据结构

vxe-table vxe-grid proxy pager 数据代理分页、自定义分页、自定义返回数据结构

vxe-grid 是一套集成完整功能的数据表格,接下来使用其他一个数据代理功能来完成列表查询。
上线配置 proxy-config,props 属性用于自定义返回的数据字段,ajax 用于配置请求接口

首页 grid 在读取完配置信息后,默认会触发 ajax.query 动作去请求数据,必须返回一个 Promise,数据结构可以自行定义

<vxe-grid
  border
  resizable
  pager-config
  ref="xGrid"
  height="500"
  :proxy-config="tableProxy"
  :columns="tableColumn">
</vxe-grid>
export default {
   
 data () {
   
   return 
  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
你可以通过以下步骤自定义 `vxe-grid` 表格的表尾行: 1. 在 `vxe-grid` 组件中,使用 `footer-rows` 属性绑定表尾行的数据,例如: ```html <vxe-grid :footer-rows="footerRows"></vxe-grid> ``` 2. 在 `methods` 中定义 `footerMethod` 方法,该方法会在表格渲染表尾行时被调用,例如: ```js methods: { footerMethod ({ columns, data }) { return [ { field: 'column1', title: 'Total', colspan: 2, footerRender: ({ $rowIndex }) => { return { children: data.reduce((total, row) => total + row.column1, 0) } } }, { field: 'column2', footerRender: ({ $rowIndex }) => { return { children: data.reduce((total, row) => total + row.column2, 0) } } } ] } } ``` 在这个示例中,我们定义了一个 `footerMethod` 方法,并返回一个包含两个表尾行列的数组。第一列的标题为 “Total”,跨越两列,第二列的标题为 “column2”。`footerRender` 函数用于渲染表尾行的单元格,通过 `data.reduce` 方法计算每列的总和并返回一个包含 `children` 属性的对象。 3. 在 `created` 生命周期中调用 `refreshFooter` 方法,以便在数据改变时重新渲染表尾行,例如: ```js created () { this.refreshFooter() }, methods: { refreshFooter () { this.$refs.grid.refreshFooter() }, footerMethod ({ columns, data }) { // ... } } ``` 在这个示例中,我们在 `created` 生命周期中调用 `refreshFooter` 方法,该方法会重新渲染表尾行。 这样就可以自定义 `vxe-grid` 表格的表尾行了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值