vxe-grid数据代理

vxe-grid高级表格：是一个包含表单、工具栏、vxe-table基础表格、分页等全功能的组件
数据代理：

1. 通过配置 proxy-config 启用数据代理将不需要再主动发送请求，由表格代理增删改查的相关调用逻辑，只需要配好了对应的接口即可自动渲染
2. 通过配置 pager-config参数开启分页功能，分页情况下默认读取响应结果中的 page.total 和 result 熟悉。可以通过 props 修改

相关DEMO入口

• 数据代理
• 数据代理+分页
• 数据代理+表单
• 完整功能

数据代理 的基本使用

仅使用 ajax 中的 query 进行查询数据，启用数据代理后，表格会主动发起请求。
可通过 this.$refs.xGrid.comitProxy('query') 进行表格刷新

<template>
<vxe-grid v-bind="gridOptions"></vxe-grid>
</template>

<script>
export default {
  data() {
    return {
      gridOptions: {
	// 数据代理配置
	proxyConfig: {
	  ajax: { 
	    // 数据查询
	    query: ({ options, page, sort, filters }) => {
	      return fetch('url', { method: "GET"}).then(response => response.data)							
	    }
	  }
        },
	// columns 
	columns: [
	  { type: 'seq',  60 },
	  { field: 'name', title: '名称' },
	  { filed: 'nickname', title: '昵称' }
	]
      }
    }
  }
}
</script>

封装 vxe-grid 数据代理

通过设置全局数据代理拦截方法实现，vxe-grid 数据代理。封装了查询、删除、保存请求

import XEUtils from 'xe-utils'
import VXETable from 'vxe-table'
import axios from 'axios'

VXETable.setup({
  grid: {
    proxyConfig: {
      // 查询
      beforeQuery ({ options, page, sort, filters }) {
        // 处理排序条件
        let formData = {
          sort: sort.property,
          order: sort.order
        }
        // 处理筛选条件
        filters.forEach(({ property, values }) => {
          formData[property] = values.join(',')
        })
        let ajaxOpts = Object.assign({ method: 'get', params: formData }, XEUtils.isString(options) ? { url: options } : options)
        if (page) {
          ajaxOpts.url = XEUtils.template(ajaxOpts.url, { page })
        }
        return axios(ajaxOpts).then(response => response.data)
      },
      // 删除
      beforeDelete ({ options, body }) {
        let ajaxOpts = Object.assign({ method: 'post', data: body }, XEUtils.isString(options) ? { url: options } : options)
        return axios(ajaxOpts).then(response => response.data)
      },
      // 保存
      beforeSave ({ options, body }) {
        let ajaxOpts = Object.assign({ method: 'post', data: body }, XEUtils.isString(options) ? { url: options } : options)
        return axios(ajaxOpts).then(response => response.data)
      }
    }
  }
})

通过配置快速渲染一个全功能的表格

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

export default {
	data () {
		return {
			gridOptions: {
				// 配置列信息
				columns: [
					{ type: 'seq', title: "序号",  60 },
					{ field: 'name', title: '姓名', editRender: { name: 'input'} }
				],
				// 配置分页信息
				pageConfig: {
					total: 0,
                	currentPage: 1,
                	pageSize: 10,
                	layouts: ['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total'],
                	pageSizes: [10,15,20,50,100]
				},
				// 配置数据代理
				proxyConfig: {
					// 启用动态序号代理，每一页的序号会根据当前页数变化
					seq: true, 
					// 启用排序代理，当点击排序时会自动触发 query 行为
					sort: true,
					// 启用筛选代理，当点击筛选时会自动触发 query 行为
					filter: true,
					// 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
					form: true,
					// 对应响应结果 { result: [], page: { total: 100 } }
					props: {
                        result: 'result', // 配置响应结果列表字段
                        total: 'page.total' // 配置响应结果总页数字段
                    },
                    ajax: {
                        query: {
                          url: '/api/user/page/list/{{page.pageSize}}/{{page.currentPage}}'
                        },
                        delete: {
                          url: '/api/user/delete'
                        },
                        save: {
                          url: '/api/user/save'
                        }
                        // 还可以自定义更多参数
                        // save: {
                        //	url: '/api/user/save',
                        //	method: 'post',
                        //	headers: { 'x-token': 'xxoo' }
                        //}
                    } 
				},
				// 配置工具栏
                toolbar: {
                    buttons: [
                      { code: 'insert_actived', name: 'Add' },
                      { code: 'delete_selection', name: 'Delete' },
                      { code: 'save', name: 'Save' }
                    ],
                    refresh: true, // 是否显示刷新按钮
                    custom: true // 是否显示自定义列设置按钮
                } 
			}
		}
	}
}