|
@@ -1,242 +1,9 @@
|
|
|
<template>
|
|
|
<div class="card content-box">
|
|
|
- <ProForm :items-options="items" :model="model">
|
|
|
- <template #username1="{ formModel }">
|
|
|
- <el-input v-model="formModel.username1" />
|
|
|
- </template>
|
|
|
- <template #transfer1="{ formModel }">
|
|
|
- <el-transfer v-model="formModel.transfer1" :data="dataT" />
|
|
|
- </template>
|
|
|
- </ProForm>
|
|
|
+ <h1>信息一览</h1>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script setup lang="ts" name="Index">
|
|
|
-import ProForm from '@/components/ProForm/index.vue'
|
|
|
-let model = {
|
|
|
- username: 'ssss',
|
|
|
- username1: '自定义的插槽',
|
|
|
- sdsds: '1',
|
|
|
- sdssssds: ['1']
|
|
|
-}
|
|
|
-const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
|
|
|
-
|
|
|
-const optionsData = Array.from({ length: 1000 }).map((_, idx) => ({
|
|
|
- value: `Option ${idx + 1}`,
|
|
|
- label: `${initials[idx % 10]}${idx}`
|
|
|
-}))
|
|
|
-const dataT = [
|
|
|
- {
|
|
|
- key: 1,
|
|
|
- label: '社么',
|
|
|
- disabled: false
|
|
|
- },
|
|
|
- {
|
|
|
- key: 2,
|
|
|
- label: 'wan',
|
|
|
- disabled: false
|
|
|
- },
|
|
|
- {
|
|
|
- key: 3,
|
|
|
- label: '伊尔',
|
|
|
- disabled: true
|
|
|
- }
|
|
|
-]
|
|
|
-
|
|
|
-const treeData = [
|
|
|
- {
|
|
|
- label: '选项1',
|
|
|
- value: '1',
|
|
|
- children: [
|
|
|
- {
|
|
|
- label: '选项1-1',
|
|
|
- value: '1-1'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '选项1-2',
|
|
|
- value: '1-2'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- label: '选项2',
|
|
|
- value: '2'
|
|
|
- }
|
|
|
-]
|
|
|
-const enumData = [
|
|
|
- {
|
|
|
- label: '选项1',
|
|
|
- value: '1'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '选项2',
|
|
|
- value: '2'
|
|
|
- },
|
|
|
- {
|
|
|
- label: '选项3',
|
|
|
- value: '3'
|
|
|
- }
|
|
|
-]
|
|
|
-let items = reactive<ProForm.ItemsOptions[]>([
|
|
|
- {
|
|
|
- label: '单行输入框',
|
|
|
- prop: 'username',
|
|
|
- rules: [{ required: true, message: '请选择步长', trigger: 'blur' }],
|
|
|
- compOptions: {
|
|
|
- elTagName: 'input',
|
|
|
- clearable: true,
|
|
|
- placeholder: '请输入用户名'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: '多行输入框',
|
|
|
- prop: 'usernames',
|
|
|
- rules: [{ required: true, message: '请选择步长', trigger: 'blur' }],
|
|
|
- compOptions: {
|
|
|
- elTagName: 'input',
|
|
|
- type: 'textarea',
|
|
|
- clearable: true,
|
|
|
- placeholder: '请输入用户名'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: '插槽',
|
|
|
- prop: 'username1',
|
|
|
- required: true,
|
|
|
- tooltip: '这是自定义插槽',
|
|
|
- compOptions: {
|
|
|
- elTagName: 'slot',
|
|
|
- clearable: true,
|
|
|
- placeholder: '请输入用户名'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: '单选',
|
|
|
- prop: 'sdsds',
|
|
|
- required: true,
|
|
|
- compOptions: {
|
|
|
- elTagName: 'radio-group',
|
|
|
- enum: enumData
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: '复选',
|
|
|
- prop: 'sdssssds',
|
|
|
- required: true,
|
|
|
- compOptions: {
|
|
|
- elTagName: 'checkbox-group',
|
|
|
- enum: enumData
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: '下拉',
|
|
|
- prop: 'select',
|
|
|
- required: true,
|
|
|
- compOptions: {
|
|
|
- elTagName: 'select',
|
|
|
- enum: enumData
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: '下拉树',
|
|
|
- prop: 'treeSelect',
|
|
|
- required: true,
|
|
|
- compOptions: {
|
|
|
- elTagName: 'tree-select',
|
|
|
- enum: treeData
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: '虚拟下拉',
|
|
|
- prop: 'selectV2',
|
|
|
- required: true,
|
|
|
- compOptions: {
|
|
|
- elTagName: 'select-v2',
|
|
|
- enum: optionsData
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: '级联',
|
|
|
- prop: 'jilian',
|
|
|
- compOptions: {
|
|
|
- elTagName: 'cascader',
|
|
|
- enum: treeData,
|
|
|
- props: {
|
|
|
- expandTrigger: 'hover' as const
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: '日期',
|
|
|
- prop: 'datePicker',
|
|
|
- compOptions: {
|
|
|
- elTagName: 'date-picker',
|
|
|
- type: 'date'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: '日期范围',
|
|
|
- prop: 'datePicker',
|
|
|
- compOptions: {
|
|
|
- elTagName: 'date-picker',
|
|
|
- type: 'daterange',
|
|
|
- rangeSeparator: 'To',
|
|
|
- startPlaceholder: 'Start date',
|
|
|
- endPlaceholder: 'End date'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: '数字框',
|
|
|
- prop: 'iNumber',
|
|
|
- compOptions: {
|
|
|
- elTagName: 'input-number',
|
|
|
- min: 1
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: '评分',
|
|
|
- prop: 'rate',
|
|
|
- compOptions: {
|
|
|
- elTagName: 'rate'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: '滑块',
|
|
|
- prop: 'slider',
|
|
|
- compOptions: {
|
|
|
- elTagName: 'slider',
|
|
|
- step: 10
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: '开关',
|
|
|
- prop: 'switch',
|
|
|
- compOptions: {
|
|
|
- elTagName: 'switch'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: '时间选择器',
|
|
|
- prop: 'timePicker',
|
|
|
- compOptions: {
|
|
|
- elTagName: 'time-picker'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: '时间下拉',
|
|
|
- prop: 'timeSelect',
|
|
|
- compOptions: {
|
|
|
- elTagName: 'time-select'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: '穿梭框',
|
|
|
- prop: 'transfer1',
|
|
|
- compOptions: {
|
|
|
- elTagName: 'slot'
|
|
|
- }
|
|
|
- }
|
|
|
-])
|
|
|
-</script>
|
|
|
+<script setup lang="ts" name="Index"></script>
|
|
|
|
|
|
<style scoped lang="scss"></style>
|