305 lines
8.9 KiB
Java
305 lines
8.9 KiB
Java
<template>
|
||
<j-vxe-table
|
||
ref="vTable"
|
||
:toolbar="true"
|
||
:row-number="true"
|
||
:row-selection="true"
|
||
:drag-sort="true"
|
||
keep-source
|
||
:height="580"
|
||
:loading="loading"
|
||
:dataSource="dataSource"
|
||
:columns="columns"
|
||
style="margin-top: 8px;"
|
||
@valueChange="handleValueChange"
|
||
>
|
||
|
||
<template v-slot:toolbarSuffix>
|
||
<a-button @click="handleTableCheck">表单验证</a-button>
|
||
<a-tooltip placement="top" title="获取值，忽略表单验证" :autoAdjustOverflow="true">
|
||
<a-button @click="handleTableGet">获取值</a-button>
|
||
</a-tooltip>
|
||
<a-tooltip placement="top" title="模拟加载1000条数据" :autoAdjustOverflow="true">
|
||
<a-button @click="handleTableSet">设置值</a-button>
|
||
</a-tooltip>
|
||
</template>
|
||
|
||
<template v-slot:action="props">
|
||
<a @click="handleCK(props)">查看</a>
|
||
<a-divider type="vertical"/>
|
||
<a-popconfirm title="确定删除吗？" @confirm="handleDL(props)">
|
||
<a>删除</a>
|
||
</a-popconfirm>
|
||
</template>
|
||
|
||
</j-vxe-table>
|
||
</template>
|
||
|
||
<script>
|
||
import moment from 'moment'
|
||
import { pushIfNotExist, randomNumber, randomUUID } from '@/utils/util'
|
||
import { JVXETypes } from '@/components/jero/JVxeTable'
|
||
|
||
export default {
|
||
name: 'JVxeDemo1',
|
||
data () {
|
||
return {
|
||
loading: false,
|
||
columns: [
|
||
{
|
||
title: '不可编辑',
|
||
key: 'normal',
|
||
type: JVXETypes.normal,
|
||
width: '180px',
|
||
fixed: 'left',
|
||
defaultValue: 'normal-new'
|
||
},
|
||
{
|
||
title: '单行文本',
|
||
key: 'input',
|
||
type: JVXETypes.input,
|
||
width: '180px',
|
||
defaultValue: '',
|
||
placeholder: '请输入${title}', // 这是vxe-table的写法
|
||
validateRules: [
|
||
{
|
||
required: true, // 必填
|
||
message: '请输入${title}' // 显示的文本
|
||
},
|
||
{
|
||
pattern: /^[a-z|A-Z][a-z|A-Z\d_-]*$/, // 正则
|
||
message: '${title}必须以字母开头，可包含数字、下划线、横杠'
|
||
},
|
||
{
|
||
unique: true,
|
||
message: '${title}不能重复'
|
||
},
|
||
{
|
||
handler ({ cellValue, row, column }, callback) {
|
||
// cellValue 当前校验的值
|
||
// callback(flag, message) 方法必须执行且只能执行一次
|
||
// flag = 是否通过了校验，不填写或者填写 null 代表不进行任何操作
|
||
// message = 提示的类型，默认使用配置的 message
|
||
// target 行编辑的实例对象
|
||
if (cellValue === 'abc') {
|
||
const flag = false
|
||
callback(flag, new Error('${title}不能是abc')) // false = 未通过校验
|
||
} else {
|
||
const flag = true
|
||
callback(flag) // true = 通过验证
|
||
}
|
||
},
|
||
message: '${title}默认提示'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: '多行文本',
|
||
key: 'textarea',
|
||
type: JVXETypes.textarea,
|
||
width: '200px'
|
||
},
|
||
{
|
||
title: '数字',
|
||
key: 'number',
|
||
type: JVXETypes.inputNumber,
|
||
width: '80px',
|
||
defaultValue: 32,
|
||
// 【统计列】sum = 求和、average = 平均值
|
||
statistics: ['sum', 'average']
|
||
},
|
||
{
|
||
title: '下拉框',
|
||
key: 'select',
|
||
type: JVXETypes.select,
|
||
width: '180px',
|
||
// 下拉选项
|
||
options: [
|
||
{ title: 'String', value: 'string' },
|
||
{ title: 'Integer', value: 'int' },
|
||
{ title: 'Double', value: 'double' },
|
||
{ title: 'Boolean', value: 'boolean' }
|
||
],
|
||
allowInput: true,
|
||
placeholder: '请选择'
|
||
},
|
||
{
|
||
title: '下拉框_字典',
|
||
key: 'select_dict',
|
||
type: JVXETypes.select,
|
||
width: '180px',
|
||
options: [],
|
||
dictCode: 'sex',
|
||
placeholder: '请选择'
|
||
},
|
||
{
|
||
title: '下拉框_多选',
|
||
key: 'select_multiple',
|
||
type: JVXETypes.selectMultiple,
|
||
width: '205px',
|
||
options: [
|
||
{ title: 'String', value: 'string' },
|
||
{ title: 'Integer', value: 'int' },
|
||
{ title: 'Double', value: 'double' },
|
||
{ title: 'Boolean', value: 'boolean' }
|
||
],
|
||
defaultValue: ['int', 'boolean'], // 多个默认项
|
||
// defaultValue: 'string,double,int', // 也可使用这种方式
|
||
placeholder: '多选'
|
||
},
|
||
|
||
{
|
||
title: '下拉框_搜索',
|
||
key: 'select_search',
|
||
type: JVXETypes.selectSearch,
|
||
width: '180px',
|
||
options: [
|
||
{ title: 'String', value: 'string' },
|
||
{ title: 'Integer', value: 'int' },
|
||
{ title: 'Double', value: 'double' },
|
||
{ title: 'Boolean', value: 'boolean' }
|
||
]
|
||
},
|
||
{
|
||
title: '日期时间',
|
||
key: 'datetime',
|
||
type: JVXETypes.datetime,
|
||
width: '200px',
|
||
defaultValue: '2019-4-30 14:52:22',
|
||
placeholder: '请选择'
|
||
},
|
||
{
|
||
title: '复选框',
|
||
key: 'checkbox',
|
||
type: JVXETypes.checkbox,
|
||
width: '100px',
|
||
customValue: ['Y', 'N'], // true ,false
|
||
defaultChecked: false
|
||
},
|
||
{
|
||
title: '操作',
|
||
key: 'action',
|
||
type: JVXETypes.slot,
|
||
fixed: 'right',
|
||
minWidth: '100px',
|
||
align: 'center',
|
||
slotName: 'action'
|
||
}
|
||
],
|
||
dataSource: []
|
||
}
|
||
},
|
||
|
||
created () {
|
||
this.randomPage(0, 20, true)
|
||
},
|
||
methods: {
|
||
|
||
handleCK (props) {
|
||
this.$message.success('请在控制台查看输出')
|
||
// 参数介绍：
|
||
// props.value 当前单元格的值
|
||
// props.row 当前行的数据
|
||
// props.rowId 当前行ID
|
||
// props.rowIndex 当前行下标
|
||
// props.column 当前列的配置
|
||
// props.columnIndex 当前列下标
|
||
// props.$table vxe实例，可以调用vxe内置方法
|
||
// props.target JVXE实例，可以调用JVXE内置方法
|
||
// props.caseId JVXE实例唯一ID
|
||
// props.scrolling 是否正在滚动
|
||
// props.triggerChange 触发change事件，用于更改slot的值
|
||
console.log('查看: ', { props })
|
||
},
|
||
|
||
handleDL (props) {
|
||
// 调用删除方法
|
||
props.target.removeRows(props.row)
|
||
},
|
||
|
||
handleValueChange (event) {
|
||
console.log('handleValueChange.event: ', event)
|
||
},
|
||
|
||
/** 表单验证 */
|
||
handleTableCheck () {
|
||
this.$refs.vTable.validateTable().then(errMap => {
|
||
if (errMap) {
|
||
console.log('表单验证未通过：', { errMap })
|
||
this.$message.error('验证未通过，请在控制台查看详细')
|
||
} else {
|
||
this.$message.success('验证通过')
|
||
}
|
||
})
|
||
},
|
||
|
||
/** 获取值，忽略表单验证 */
|
||
handleTableGet () {
|
||
const values = this.$refs.vTable.getTableData()
|
||
console.log('获取值:', { values })
|
||
this.$message.success('获取值成功，请看控制台输出')
|
||
},
|
||
|
||
/** 模拟加载1000条数据 */
|
||
handleTableSet () {
|
||
this.randomPage(1, 1000, true)
|
||
},
|
||
|
||
/* 随机生成数据 */
|
||
randomPage (current, pageSize, loading = false) {
|
||
if (loading) {
|
||
this.loading = true
|
||
}
|
||
|
||
const randomDatetime = () => {
|
||
const time = randomNumber(1000, 9999999999999)
|
||
return moment(new Date(time)).format('YYYY-MM-DD HH:mm:ss')
|
||
}
|
||
|
||
const limit = (current - 1) * pageSize
|
||
|
||
const options = ['string', 'int', 'double', 'boolean']
|
||
|
||
const begin = Date.now()
|
||
const values = []
|
||
for (let i = 0; i < pageSize; i++) {
|
||
values.push({
|
||
id: randomUUID(),
|
||
normal: `normal-${(limit + i) + 1}`,
|
||
input: `text-${(limit + i) + 1}`,
|
||
textarea: `textarea-${(limit + i) + 1}`,
|
||
number: randomNumber(0, 233),
|
||
select: options[randomNumber(0, 3)],
|
||
select_dict: randomNumber(1, 2).toString(),
|
||
select_multiple: (() => {
|
||
const length = randomNumber(1, 4)
|
||
const arr = []
|
||
for (let j = 0; j < length; j++) {
|
||
pushIfNotExist(arr, options[randomNumber(0, 3)])
|
||
}
|
||
return arr
|
||
})(),
|
||
select_search: options[randomNumber(0, 3)],
|
||
datetime: randomDatetime(),
|
||
checkbox: ['Y', 'N'][randomNumber(0, 1)]
|
||
})
|
||
}
|
||
|
||
this.dataSource = values
|
||
const end = Date.now()
|
||
const diff = end - begin
|
||
|
||
if (loading && diff < pageSize) {
|
||
setTimeout(() => {
|
||
this.loading = false
|
||
}, pageSize - diff)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style>
|