|
|
<template>
|
|
|
<j-vxe-table
|
|
|
ref="vTable"
|
|
|
toolbar
|
|
|
row-number
|
|
|
row-selection
|
|
|
drag-sort
|
|
|
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/jeecg/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}',
|
|
|
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, target) {
|
|
|
// cellValue 当前校验的值
|
|
|
// callback(flag, message) 方法必须执行且只能执行一次
|
|
|
// flag = 是否通过了校验，不填写或者填写 null 代表不进行任何操作
|
|
|
// message = 提示的类型，默认使用配置的 message
|
|
|
// target 行编辑的实例对象
|
|
|
if (cellValue === 'abc') {
|
|
|
callback(false, '${title}不能是abc') // false = 未通过校验
|
|
|
} else {
|
|
|
callback(true) // 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: '180px',
|
|
|
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
|
|
|
}
|
|
|
|
|
|
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 options = ['string', 'int', 'double', 'boolean']
|
|
|
|
|
|
let begin = Date.now()
|
|
|
let 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: (() => {
|
|
|
let length = randomNumber(1, 4)
|
|
|
let 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
|
|
|
let end = Date.now()
|
|
|
let diff = end - begin
|
|
|
|
|
|
if (loading && diff < pageSize) {
|
|
|
setTimeout(() => {
|
|
|
this.loading = false
|
|
|
}, pageSize - diff)
|
|
|
}
|
|
|
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
|
</style> |
