vxe-grid数据代理
vxe-grid高级表格：是一个包含表单、工具栏、vxe-table基础表格、分页等全功能的组件
数据代理：
- 通过配置
proxy-config启用数据代理将不需要再主动发送请求，由表格代理增删改查的相关调用逻辑，只需要配好了对应的接口即可自动渲染 - 通过配置
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', width: 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: "序号", width: 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 // 是否显示自定义列设置按钮
}
}
}
}
}
