XCrud
基础的XCrud的展示用法。
提示
<template>
<div>
<XCrud :form="form" :option="option" :data="data" @before-open="beforeOpen" />
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TableOption } from 'cjx-low-code'
const option = ref<TableOption>({
column: [
{
label: '姓名',
prop: 'name'
},
{
label: '年龄',
prop: 'age'
},
{
label: '地址',
prop: 'address'
},
{
label: '性别',
prop: 'sex'
}
]
})
const data = [
{
name: '张三',
age: 18,
address: '北京市',
sex: '男'
},
{
name: '小红',
age: 20,
address: '上海市',
sex: '女'
}
]
const form = ref({})
const beforeOpen: (...args: any[]) => void = (type, row, done) => {
console.log(type, row)
done()
}
</script>
有搜索栏和操作栏
<template>
<div>
<XCrud
v-model:form="form"
v-model:search="search"
:option="option"
:data="data"
@before-open="beforeOpen"
@row-save="addSave"
@row-update="rowUpdate"
:on-load="onLoad"
/>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TableOption } from 'cjx-low-code'
import { ElMessage } from 'element-plus'
const option = ref<TableOption>({
addBtn: true,
menu: true,
viewBtn: true,
updateBtn: true,
column: [
{
label: '姓名',
prop: 'name',
search: true
},
{
label: '年龄',
prop: 'age',
search: true,
searchType: 'input',
type: 'inputNumber',
inputNumber: {
min: 0
}
},
{
label: '地址',
prop: 'address'
},
{
label: '性别',
prop: 'sex',
type: 'select',
search: true,
dicData: [
{
label: '男',
value: '1'
},
{
label: '女',
value: '2'
}
]
}
]
})
const data = [
{
name: '张三',
age: 18,
address: '北京市',
sex: '1'
},
{
name: '小红',
age: 20,
address: '上海市',
sex: '2'
}
]
const form = ref({})
const search = ref({})
const beforeOpen: (...args: any[]) => void = (type, row, done) => {
ElMessage.success(type)
done()
}
const onLoad = async () => {
// 模拟异步请求
await new Promise<void>(resolve => {
ElMessage.success(JSON.stringify(search.value))
setTimeout(() => resolve(), 500)
})
}
const addSave = (row: any, done: Function) => {
ElMessage.success(JSON.stringify(row))
done()
}
const rowUpdate = (row: any, done: Function) => {
ElMessage.success(JSON.stringify(row))
done()
}
</script>
有搜索栏和操作栏和分页
共 20 条
- 1
- 2
页
<template>
<div>
<XCrud
v-model:form="form"
v-model:search="search"
:option="option"
:data="data"
:page="page"
@before-open="beforeOpen"
@row-del="rowDel"
@row-save="addSave"
@row-update="rowUpdate"
:on-load="onLoad"
/>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TableOption, CrudPageProps } from 'cjx-low-code'
import { ElMessage } from 'element-plus'
const option = ref<TableOption>({
addBtn: true,
menu: true,
viewBtn: true,
updateBtn: true,
delBtn: true,
column: [
{
label: '姓名',
prop: 'name',
search: true,
rules:[
{ required: true, message: '请输入姓名', trigger: 'blur' }
]
},
{
label: '年龄',
prop: 'age',
search: true,
type: 'inputNumber',
inputNumber: {
min: 1,
},
rules:[
{ required: true, message: '请输入年龄', trigger: 'blur' }
]
},
{
label: '地址',
prop: 'address'
},
{
label: '性别',
prop: 'sex',
type: 'select',
search: true,
dicData: [
{
label: '男',
value: '1'
},
{
label: '女',
value: '2'
}
]
}
]
})
const data = [
{
name: '张三',
age: 18,
address: '北京市',
sex: '1'
},
{
name: '小红',
age: 20,
address: '上海市',
sex: '2'
}
]
const form = ref({})
const page = ref<CrudPageProps>({
total: 20,
pageSize: 10,
currentPage: 1
})
const search = ref({})
const beforeOpen: (...args: any[]) => void = (type, row, done) => {
ElMessage.success(type)
done()
}
const onLoad = async () => {
// 模拟异步请求
await new Promise<void>(resolve => {
ElMessage.success(JSON.stringify(search.value))
setTimeout(() => resolve(), 500)
})
}
const addSave = (row: any, done: Function) => {
ElMessage.success(JSON.stringify(row))
done()
}
const rowUpdate = (row: any, done: Function) => {
ElMessage.success(JSON.stringify(row))
done()
}
const rowDel = (row: any, index: number) => {
ElMessage.success(JSON.stringify(row))
}
</script>
有编辑表格表单的Crud
<template>
<div>
<XCrud
v-model:form="form"
v-model:search="search"
:option="option"
:data="data"
@before-open="beforeOpen"
@row-save="addSave"
@row-update="rowUpdate"
:on-load="onLoad"
/>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
// import { XCrud } from 'cjx-low-code'
import type { TableOption } from 'cjx-low-code'
import { ElMessage } from 'element-plus'
const option = ref<TableOption>({
addBtn: true,
menu: true,
viewBtn: true,
updateBtn: true,
column: [
{
label: '姓名',
prop: 'name',
search: true
},
{
label: '年龄',
prop: 'age',
search: true,
searchType: 'input',
type: 'inputNumber',
inputNumber: {
min: 0
}
},
{
label: '地址',
prop: 'address'
},
{
label: '性别',
prop: 'sex',
type: 'select',
search: true,
dicData: [
{
label: '男',
value: '1'
},
{
label: '女',
value: '2'
}
]
},
{
label: '',
prop: 'editTable',
type: 'editTable',
hide: true,
span: 24,
editTable: {
option: {
addBtn: true,
delBtn: true,
copyBtn: true,
sortable: true,
column: [
{
label: '姓名',
prop: 'name',
type: 'input',
rules: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
]
},
{
label: '年龄',
prop: 'age',
type: 'inputNumber',
inputNumber: {
min: 1
},
rules: [
{ required: true, message: '请输入年龄', trigger: 'blur' }
]
}
]
}
}
}
],
})
const data = [
{
name: '张三',
age: 28,
address: '北京市',
sex: '1',
editTable: [
{
name: '张三的儿子',
age: 6
}
]
},
{
name: '小红',
age: 20,
address: '上海市',
sex: '2',
editTable: [
{
name: '小红的女儿',
age: 6
},
]
}
]
const form = ref({
})
const search = ref({})
const beforeOpen: (...args: any[]) => void = (type, row, done) => {
ElMessage.success(type)
done()
}
const onLoad = async () => {
// 模拟异步请求
await new Promise<void>(resolve => {
ElMessage.success(JSON.stringify(search.value))
setTimeout(() => resolve(), 500)
})
}
const addSave = (row: any, done: Function) => {
ElMessage.success(JSON.stringify(row))
done()
}
const rowUpdate = (row: any, done: Function) => {
ElMessage.success(JSON.stringify(row))
done()
}
</script>