Vue中的vxe-table教程25-高级表格-完整功能
效果图：1. index.html代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 --><!--vue需引入-->&l
·
效果图：
1. index.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->
<!-- vue需引入-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- vxe-table需引入-->
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
<!-- xe-ajax需引入-->
<script src="https://cdn.jsdelivr.net/npm/xe-ajax"></script>
<!-- 图标需引入-->
<!-- 下载地址：http://www.fontawesome.com.cn/-->
<link rel="stylesheet" href="./css/font-awesome.css">
</head>
<body>
<div id="app">
<template>
<div style="padding: 0 50px 0 50px">
<vxe-grid ref='xGrid' v-bind="gridOptions">
<!-- 自定义空数据模板-->
<template v-slot:empty>
<span style="color: red;">
<img src="./img/img1.gif">
<p>没有更多数据了！</p>
</span>
</template>
</vxe-grid>
</div>
</template>
</div>
</body>
<script src="./js/main.js"></script>
<link rel="stylesheet" href="./css/main.css">
</html>
2. main.css代码
@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");
3. main.js代码
var Main = {
data() {
return {
gridOptions: {
border: true,
resizable: true,
showHeaderOverflow: true,
showOverflow: true,
highlightHoverRow: true,
keepSource: true,
id: 'full_edit_1',
height: 600,
rowId: 'id',
customConfig: {
storage: true,
checkMethod: this.checkColumnMethod
},
printConfig: {
columns: [
{field: 'name'},
{field: 'role'},
{field: 'email'},
{field: 'nickname'},
{field: 'sex'},
{field: 'age'},
{field: 'amount'}
]
},
sortConfig: {
trigger: 'cell'
},
filterConfig: {
remote: true
},
pagerConfig: {
pageSize: 10,
pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000]
},
formConfig: {
titleWidth: 100,
titleAlign: 'right',
items: [
{
field: 'name',
title: '姓名',
span: 8,
titlePrefix: {message: '请必须输入姓名', icon: 'fa fa-exclamation-circle'},
itemRender: {name: '$input', props: {placeholder: '请输入名称'}}
},
{
field: 'email',
title: '邮件',
span: 8,
itemRender: {name: '$input', props: {placeholder: '请输入邮件'}}
},
{
field: 'nickname',
title: '昵称',
span: 8,
itemRender: {name: '$input', props: {placeholder: '请输入昵称'}}
},
{
field: 'role',
title: '角色',
span: 8,
folding: true,
itemRender: {name: '$input', props: {placeholder: '请输入角色'}}
},
{
field: 'sex',
title: '性别',
span: 8,
folding: true,
titleSuffix: {message: '注意，必填信息！', icon: 'fa fa-info-circle'},
itemRender: {name: '$select', options: [{"label": "男", "value": 1}, {"label": "女", "value": 0}]}
},
{
field: 'age',
title: '年龄',
span: 8,
folding: true,
itemRender: {
name: '$input',
props: {type: 'number', min: 1, max: 120, placeholder: '请输入年龄'}
}
},
{
span: 24,
align: 'center',
collapseNode: true,
itemRender: {
name: '$buttons',
children: [{
props: {
type: 'submit',
content: '查询',
status: 'primary'
}
}, {props: {type: 'reset', content: '重置'}}]
}
}
]
},
toolbarConfig: {
buttons: [
{code: 'insert_actived', name: '新增', icon: 'fa fa-plus'},
{code: 'delete', name: '直接删除', icon: 'fa fa-trash-o'},
{code: 'mark_cancel', name: '删除/取消', icon: 'fa fa-trash-o'},
{code: 'save', name: '保存', icon: 'fa fa-save', status: 'success'}
],
refresh: true,
import: true,
export: true,
print: true,
zoom: true,
custom: true
},
proxyConfig: {
seq: true, // 启用动态序号代理
sort: true, // 启用排序代理
filter: true, // 启用筛选代理
form: true, // 启用表单代理
props: {
result: 'result',
total: 'page.total'
},
ajax: {
// 接收 Promise 对象
query: ({page, sorts, filters, form}) => {
const queryParams = Object.assign({}, form)
// 处理排序条件
const firstSort = sorts[0]
if (firstSort) {
queryParams.sort = firstSort.property
queryParams.order = firstSort.order
}
// 处理筛选条件
filters.forEach(({property, values}) => {
queryParams[property] = values.join(',')
})
return XEAjax.get(`https://api.xuliangzhan.com:10443/api/pub/page/list/${page.pageSize}/${page.currentPage}`, queryParams)
},
delete: ({body}) => XEAjax.post('https://api.xuliangzhan.com:10443/api/pub/save', body),
save: ({body}) => XEAjax.post('https://api.xuliangzhan.com:10443/api/pub/save', body)
}
},
columns: [
{type: 'checkbox', title: 'id', width: 120},
{
field: 'name',
title: 'name',
sortable: true,
titleHelp: {message: '名称必须填写！'},
editRender: {name: 'input'}
},
{
field: 'role',
title: 'role',
sortable: true,
filters: [
{label: '前端开发', value: '前端'},
{label: '后端开发', value: '后端'},
{label: '测试', value: '测试'},
{label: '程序员鼓励师', value: '程序员鼓励师'}
],
filterMultiple: false,
editRender: {name: 'input'}
},
{field: 'email', title: 'email', width: 160, editRender: {name: 'input'}},
{field: 'nickname', title: 'nickname', editRender: {name: 'input'}},
{field: 'sex', title: 'sex', editRender: {name: '$select', options: [{"label": "男", "value": 1}, {"label": "女", "value": 0}]}},
{
field: 'age',
title: 'age',
visible: false,
sortable: true,
editRender: {name: '$input', props: {type: 'number', min: 1, max: 120}}
},
{
field: 'amount',
title: 'amount',
formatter: this.formatAmount,
editRender: {name: '$input', props: {type: 'float', digits: 2}}
},
{
field: 'updateDate',
title: 'updateDate',
width: 160,
visible: false,
sortable: true,
formatter: this.formatDate
},
{
field: 'createDate',
title: 'createDate',
width: 160,
visible: false,
sortable: true,
formatter: this.formatDate
}
],
importConfig: {
remote: true,
importMethod: this.importMethod,
types: ['csv'],
modes: ['insert']
},
exportConfig: {
// type: "", // 默认选中类型
// remote: true,
// exportMethod: this.exportMethod,
types: ['csv', 'html', 'xml', 'txt'],
modes: ['current', 'selected', 'all']
},
checkboxConfig: {
labelField: 'id',
reserve: true,
highlight: true,
range: true
},
editRules: {
name: [
{required: true, message: 'app.body.valid.rName'},
{min: 3, max: 50, message: '名称长度在 3 到 50 个字符'}
],
email: [
{required: true, message: '邮件必须填写'}
],
role: [
{required: true, message: '角色必须填写'}
]
},
editConfig: {
trigger: 'dblclick',
mode: 'row',
showStatus: true
}
}
}
},
created() {
// this.findSexList()
},
methods: {
// async findSexList() {
// const sexList = await XEAjax.get('/api/conf/sex/list')
// // 异步更新下拉选项
// this.sexList = sexList
// const xGrid = this.$refs.xGrid
// if (xGrid) {
// const sexColumn = xGrid.getColumnByField('sex')
// sexColumn.editRender.options = sexList
// const sexItem = xGrid.getFormItems(4)
// sexItem.itemRender.options = sexList
// }
// },
formatAmount({cellValue}) {
return cellValue ? `$${XEUtils.commafy(XEUtils.toNumber(cellValue), {digits: 2})}` : ''
},
formatDate({cellValue}) {
return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:ss:mm')
},
checkColumnMethod({column}) {
if (['nickname', 'role'].includes(column.property)) {
return false
}
return true
},
importMethod({file}) {
// 处理表单
const formBody = new FormData()
formBody.append('file', file)
// 上传文件
return XEAjax.post('https://api.xuliangzhan.com:10443/api/pub/import', formBody).then(data => {
this.$XModal.message({message: `成功导入 ${data.result.insertRows} 条记录！`, status: 'success'})
// 导入完成，刷新表格
this.$refs.xGrid.commitProxy('query')
}).catch(() => {
this.$XModal.message({message: '导入失败，请检查数据是否正确！', status: 'error'})
})
},
// exportMethod({options}) {
// const proxyInfo = this.$refs.xGrid.getProxyInfo()
// // 传给服务端的参数
// const body = {
// filename: options.filename,
// sheetName: options.sheetName,
// isHeader: options.isHeader,
// original: options.original,
// mode: options.mode,
// pager: proxyInfo.pager,
// ids: options.mode === 'selected' ? options.data.map(item => item.id) : [],
// fields: options.columns.map(column => {
// return {
// field: column.property,
// title: column.title
// }
// })
// }
// // 开始服务端导出
// return XEAjax.post('https://api.xuliangzhan.com:10443/api/pub/export', body).then(data => {
// if (data.id) {
// this.$XModal.message({message: '导出成功，开始下载', status: 'success'})
// // 读取路径，请求文件
// XEAjax.fetch(`https://api.xuliangzhan.com:10443/api/pub/export/download/${data.id}`).then(response => {
// response.blob().then(blob => {
// // 开始下载
// this.$XSaveFile({filename: '导出数据', type: 'xlsx', content: blob})
// })
// })
// }
// }).catch(() => {
// this.$XModal.message({message: '导出失败！', status: 'error'})
// })
// }
}
};
var app = new Vue(Main).$mount('#app');
// 给 vue 实例挂载内部对象，例如
Vue.prototype.$XModal = VXETable.modal;
Vue.prototype.$XPrint = VXETable.print;
Vue.prototype.$XSaveFile = VXETable.saveFile;
Vue.prototype.$XReadFile = VXETable.readFile;
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献21条内容
所有评论(0)