Vue中的vxe-table教程24-高级表格-完整查询功能
效果图：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:toolbar_buttons>
<vxe-form :data="formData" @submit="searchEvent" @reset="searchEvent">
<!-- 搜索的字段 -->
<vxe-form-item field="name"
:item-render="{name: 'input', attrs: {placeholder: '请输入名称'}}"></vxe-form-item>
<vxe-form-item
:item-render="{ name: '$buttons', children: [{ props: { type: 'submit', content: '查询', status: 'primary' } }, { props: { type: 'reset', content: '重置' } }] }"></vxe-form-item>
</vxe-form>
</template>
<!--自定义空数据模板-->
<template v-slot:empty>
<span style="color: red;">
<img src="/vxe-table/static/other/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 {
formData: {
name: '',
},
gridOptions: {
resizable: true,
showOverflow: true,
border: 'inner',
height: 548,
rowId: 'id',
printConfig: {
columns: [
{field: 'id'},
{field: 'name'},
{field: 'email'},
{field: 'nickname'},
{field: 'age'},
{field: 'role'},
{field: 'amount'},
{field: 'updateDate'},
{field: 'createDate'},
],
modes: ['current', 'selected', 'all']
},
sortConfig: {
trigger: 'cell',
remote: true,
defaultSort: {
field: 'name',
order: 'desc'
}
},
filterConfig: {
remote: true
},
pagerConfig: {
// perfect: true,
pageSize: 10,
pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000]
},
exportConfig: {
// 默认选中类型
type: 'xlsx',
// 局部自定义类型
types: ['xlsx', 'csv', 'html', 'xml', 'txt', 'pdf'],
// 自定义数据量列表
modes: ['current', 'selected', 'all']
},
checkboxConfig: {
labelField: 'id',
reserve: true, // 分页场景下，继续保留选中状态
highlight: true,
range: true
},
proxyConfig: {
seq: true, // 启用动态序号代理
sort: true, // 启用排序代理
filter: true, // 启用筛选代理
props: {
result: 'result', // 配置响应结果列表字段
total: 'page.total' // 配置响应结果总页数字段
},
ajax: {
// 接收 Promise 对象
query: ({page, sorts, filters}) => {
const queryParams = Object.assign({}, this.formData);
// 处理排序条件
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)
},
// 被某些特殊功能所触发，例如：导出数据 mode=all 时，会触发该方法并对返回的数据进行导出
queryAll: () => XEAjax.get('https://api.xuliangzhan.com:10443/api/pub/all')
}
},
toolbarConfig: {
export: true,
print: true,
custom: true,
zoom: true,
slots: {
buttons: 'toolbar_buttons'
}
},
columns: [
{type: 'seq', width: 60, fixed: 'left', title: '序号'},
{type: 'checkbox', title: 'ID', width: 120, fixed: 'left'},
{field: 'name', title: '姓名', minWidth: 160, sortable: true},
{field: 'email', title: '邮箱', minWidth: 160, editRender: {name: 'input'}},
{field: 'nickname', title: '昵称', sortable: true, minWidth: 160},
{field: 'age', title: '年龄', visible: false, sortable: true, width: 100},
{
field: 'role',
title: '职位',
sortable: true,
minWidth: 160,
filters: [
{label: '前端开发', value: '前端', checked: true},
{label: '后端开发', value: '后端'},
{label: '测试', value: '测试'},
{label: '程序员鼓励师', value: '程序员鼓励师'}
],
filterMultiple: false
},
{field: 'amount', title: '收入', width: 140, formatter: this.formatAmount},
{
field: 'updateDate',
title: '更新时间',
visible: false,
width: 160,
sortable: true,
formatter: this.formatDate
},
{
field: 'createDate',
title: '创建时间',
visible: false,
width: 160,
sortable: true,
formatter: this.formatDate
}
]
}
}
},
created() {
},
methods: {
searchEvent() {
this.$refs.xGrid.commitProxy('reload')
},
formatAmount({cellValue}) {
return cellValue ? `￥${XEUtils.commafy(XEUtils.toNumber(cellValue), {digits: 2})}` : ''
},
formatDate({cellValue}) {
return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:ss:mm')
}
}
};
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;
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献21条内容
所有评论(0)