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 // 是否顯示自定義列設置按鈕
}
}
}
}
}