<template> <j-vxe-table ref="vTable" toolbar row-number row-selection keep-source :height="484" :loading="loading" :dataSource="dataSource" :columns="columns" :pagination="pagination" style="margin-top: 8px;" @pageChange="handlePageChange" > <template v-slot:toolbarSuffix> <a-button @click="handleTableGet">获取值</a-button> </template> </j-vxe-table> </template> <script> import moment from 'moment' import {randomNumber, randomUUID} from '@/utils/util' import {JVXETypes} from '@/components/jeecg/JVxeTable' export default { name: 'JVxeDemo2', data() { return { loading: false, columns: [ { title: '下拉框_字典表搜索', key: 'select_dict_search', type: JVXETypes.selectDictSearch, width: '200px', // 【字典表配置信息】:数据库表名,显示字段名,存储字段名 dict: 'sys_user,realname,username', }, { title: 'JPopup', key: 'popup', type: JVXETypes.popup, width: '180px', popupCode: 'demo', field: 'name,sex,age', orgFields: 'name,sex,age', destFields: 'popup,popup_sex,popup_age' }, { title: 'JP-性别', key: 'popup_sex', type: JVXETypes.select, dictCode: 'sex', disabled: true, width: '100px', }, { title: 'JP-年龄', key: 'popup_age', type: JVXETypes.normal, width: '80px', }, { title: '进度条', key: 'progress', type: JVXETypes.progress, minWidth: '120px' }, { title: '单选', key: 'radio', type: JVXETypes.radio, width: '130px', options: [ {text: '男', value: '1'}, {text: '女', value: '2'}, ], // 允许清除选择(再点一次取消选择) allowClear: true }, { title: '上传', key: 'upload', type: JVXETypes.upload, width: '180px', btnText: '点击上传', token: true, responseName: 'message', action: window._CONFIG['domianURL'] + '/sys/common/upload' }, { title: '图片上传', key: 'image', type: JVXETypes.image, width: '180px', token: true, }, { title: '文件上传', key: 'file', type: JVXETypes.file, width: '180px', token: true, }, ], dataSource: [], pagination: { current: 1, pageSize: 10, pageSizeOptions: ['10', '20', '30', '100', '200'], total: 1000, }, } }, created() { this.randomPage(this.pagination.current, this.pagination.pageSize, true) }, methods: { // 当分页参数变化时触发的事件 handlePageChange(event) { // 重新赋值 this.pagination.current = event.current this.pagination.pageSize = event.pageSize // 查询数据 this.randomPage(event.current, event.pageSize, true) }, /** 获取值,忽略表单验证 */ handleTableGet() { const values = this.$refs.vTable.getTableData() console.log('获取值:', {values}) this.$message.success('获取值成功,请看控制台输出') }, /* 随机生成数据 */ randomPage(current, pageSize, loading = false) { if (loading) { this.loading = true } let randomDatetime = () => { let time = randomNumber(1000, 9999999999999) return moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss') } let limit = (current - 1) * pageSize let begin = Date.now() let values = [] for (let i = 0; i < pageSize; i++) { let radio = randomNumber(0, 2) values.push({ id: randomUUID(), select_dict_search: ['', 'admin', '', 'jeecg', ''][randomNumber(0, 4)], progress: randomNumber(0, 100), radio: radio ? radio.toString() : null }) } this.dataSource = values let end = Date.now() let diff = end - begin if (loading && diff < pageSize) { setTimeout(() => { this.loading = false }, pageSize - diff) } } } } </script> <style scoped> </style>