console
var Main = {
data() {
return {
validRules: {
name: [
{ required: true, message: '名称必须填写' },
{ min: 3, max: 50, message: '名称长度在 3 到 50 个字符' }
],
role: [
{ required: true, message: '角色必须填写' }
]
},
tableProxy: {
// index: true, // 启用动态序号代理
props: {
result: 'result', // 设置后台返回数据所对应的字段名
total: 'page.total'
},
ajax: {
// 任何支持 Promise API 的库都可以对接(fetch、jquery、axios、xe-ajax)
query: ({ page }) => this.doGet(`/api/user/page/list/${page.pageSize}/${page.currentPage}`),
delete: ({ body }) => this.doDelete('/api/user/save', body),
save: ({ body }) => this.doSave('/api/user/save', body)
}
},
tableColumn: [
{ type: 'checkbox', width: 50 },
{ type: 'index', title: '序号', width: 180 },
{ field: 'name', title: 'Name', editRender: { name: 'input' },width: 180 },
{ field: 'nickname', title: 'Nickname', editRender: { name: 'input' },width: 180 },
{ field: 'sex', title: 'Sex', editRender: { name: 'select', options: [] },width: 180 },
{
field: 'role',
title: 'Role',
//remoteSort: true, //是否服务器排序
filters: [
{ label: '前端', value: '前端' },
{ label: '后端', value: '后端' }
],
width: 180,
//filterMultiple: false,//是否允许多选
editRender: { name: 'input' }
},
{ field: 'address', title: 'Address', fixed:'right', showOverflow: true, editRender: { name: 'input' },minWidth:'120' }
]
}
},
methods: {
roload(){
var list = []
for(var index = 0; index < 3; index++){
list.push({
id: index + 10000,
checked: false,
name: 'test' + index,
nickname: '昵称' + index,
role: index % 2 === 0 ? '后端': '前端',
sex: 'Man',
date: '2019-05-01',
time: 1556677810888 + index * 500,
region: 'ShenZhen',
address: 'address abc' + index
})
}
this.$refs.xGrid.reloadData(list)
},
doGet () {
// 模拟后台接口
return new Promise(resolve => {
setTimeout(() => {
var list = []
for(var index = 0; index < 100; index++){
list.push({
id: index + 10000,
checked: false,
name: 'test' + index,
nickname: '昵称' + index,
role: index % 2 === 0 ? '后端': '前端',
sex: 'Man',
date: '2019-05-01',
time: 1556677810888 + index * 500,
region: 'ShenZhen',
address: 'address abc' + index
})
}
var rest = {
result: list,
page: {
total: 1000
}
}
resolve(rest)
}, 300)
})
},
doDelete () {
// 模拟后台接口
return new Promise(resolve => {
setTimeout(() => {
resolve()
}, 300)
})
},
doSave () {
// 模拟后台接口
return new Promise(resolve => {
setTimeout(() => {
resolve()
}, 300)
})
},
toolbarButtonClickEvent ({ code }, event) {
console.log(code,111)
switch (code) {
case 'insert':
this.$XModal.alert(code)
break
case 'save':
this.$XModal.alert(code)
break
}
}
}
};
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app')
<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/xe-utils"></script>
<script src="//unpkg.com/vxe-table"></script>
<div id="app">
<template>
<button @click='roload'>重载数据</button>
<vxe-grid
border
resizable
highlight-hover-row
ref="xGrid"
max-height="500"
:pager-config="{pageSize: 15}"
:proxy-config="tableProxy"
:columns="tableColumn"
:checkbox-config="{reserve: true}"
:edit-rules="validRules"
:edit-config="{trigger: 'click', mode: 'row', showStatus: true}">
</vxe-grid>
</template>
</div>
@import url("//unpkg.com/vxe-table/lib/index.css");