<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>
JVxeTable 组件配置文档
最新推荐文章于 2024-05-07 23:25:33 发布