Vxe-table表格的基本使用
utils.js 文件
如果值不存在就 push 进数组，反之不处理
export function pushIfNotExist(array, value, key) {
for (let item of array) {
if (key && (item[key] === value[key])) {
return false
} else if (item === value) {
return false
}
}
array.push(value)
return true
}
生成随机字符串
export function randomNumber() {
// 生成 最小值 到 最大值 区间的随机数
const random = (min, max) => {
return Math.floor(Math.random() * (max - min + 1) + min)
}
if (arguments.length === 1) {
let [length] = arguments
// 生成指定长度的随机数字，首位一定不是 0
let nums = [...Array(length).keys()].map((i) => (i > 0 ? random(0, 9) : random(1, 9)))
return parseInt(nums.join(''))
} else if (arguments.length >= 2) {
let [min, max] = arguments
return random(min, max)
} else {
return Number.NaN
}
}
随机32位字符
export function randomUUID() {
let chats = '0123456789abcdef'
return randomString(32, chats)
}
Vxe-TABLE
<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: '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
}
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>
JVUETable 文件
// 组件类型
export default JVXETypes
export const JVXETypes = {
// 为了防止和 vxe 内置的类型冲突，所以加上一个前缀
// 前缀是自动加的，代码中直接用就行（JVXETypes.input）
_prefix: 'j-',
// 行号列
rowNumber: 'row-number',
// 选择列
rowCheckbox: 'row-checkbox',
// 单选列
rowRadio: 'row-radio',
// 展开列
rowExpand: 'row-expand',
// 上下排序
rowDragSort: 'row-drag-sort',
input: 'input',
inputNumber: 'inputNumber',
textarea: 'textarea',
select: 'select',
date: 'date',
datetime: 'datetime',
checkbox: 'checkbox',
upload: 'upload',
// 下拉搜索
selectSearch: 'select-search',
// 下拉多选
selectMultiple: 'select-multiple',
// 进度条
progress: 'progress',
//部门选择
departSelect: 'sel_depart',
//用户选择
userSelect: 'sel_user',
// 拖轮Tags（暂无用）
tags: 'tags',
slot: 'slot',
normal: 'normal',
hidden: 'hidden',
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）