lostecho/vue-element-plus-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: #342

Browse Source
This commit is contained in:
kailong321200875
2023-10-09 14:11:09 +08:00
parent d543e56efb
commit 1c51221645
4 changed files with 184 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/views/Components/Form/UseFormDemo.vue
View File

@@ -12,6 +12,86 @@ const { required } = useValidator()
const { t } = useI18n()
const treeSelectData = [
{
value: '1',
label: 'Level one 1',
children: [
{
value: '1-1',
label: 'Level two 1-1',
children: [
{
value: '1-1-1',
label: 'Level three 1-1-1'
}
]
}
]
},
{
value: '2',
label: 'Level one 2',
children: [
{
value: '2-1',
label: 'Level two 2-1',
children: [
{
value: '2-1-1',
label: 'Level three 2-1-1'
}
]
},
{
value: '2-2',
label: 'Level two 2-2',
children: [
{
value: '2-2-1',
label: 'Level three 2-2-1'
}
]
}
]
},
{
value: '3',
label: 'Level one 3',
children: [
{
value: '3-1',
label: 'Level two 3-1',
children: [
{
value: '3-1-1',
label: 'Level three 3-1-1'
}
]
},
{
value: '3-2',
label: 'Level two 3-2',
children: [
{
value: '3-2-1',
label: 'Level three 3-2-1'
}
]
}
]
}
]
// 模拟远程加载
const getTreeSelectData = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(treeSelectData)
}, 3000)
})
}
const schema = reactive<FormSchema[]>([
{
field: 'field1',
@@ -92,6 +172,16 @@ const schema = reactive<FormSchema[]>([
field: 'field6',
component: 'TimeSelect',
label: t('formDemo.timeSelect')
},
{
field: 'field7',
label: `${t('formDemo.treeSelect')}`,
component: 'TreeSelect',
// 远程加载option
optionApi: async () => {
const res = await getTreeSelectData()
return res
}
}
])

90
src/views/Components/Search.vue
View File

@@ -13,6 +13,86 @@ const { t } = useI18n()
const { searchRegister, searchMethods } = useSearch()
const { setSchema, setProps, setValues } = searchMethods
const treeSelectData = [
{
value: '1',
label: 'Level one 1',
children: [
{
value: '1-1',
label: 'Level two 1-1',
children: [
{
value: '1-1-1',
label: 'Level three 1-1-1'
}
]
}
]
},
{
value: '2',
label: 'Level one 2',
children: [
{
value: '2-1',
label: 'Level two 2-1',
children: [
{
value: '2-1-1',
label: 'Level three 2-1-1'
}
]
},
{
value: '2-2',
label: 'Level two 2-2',
children: [
{
value: '2-2-1',
label: 'Level three 2-2-1'
}
]
}
]
},
{
value: '3',
label: 'Level one 3',
children: [
{
value: '3-1',
label: 'Level two 3-1',
children: [
{
value: '3-1-1',
label: 'Level three 3-1-1'
}
]
},
{
value: '3-2',
label: 'Level two 3-2',
children: [
{
value: '3-2-1',
label: 'Level three 3-2-1'
}
]
}
]
}
]
// 模拟远程加载
const getTreeSelectData = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(treeSelectData)
}, 3000)
})
}
const schema = reactive<FormSchema[]>([
{
field: 'field1',
@@ -125,6 +205,16 @@ const schema = reactive<FormSchema[]>([
field: 'field18',
label: t('formDemo.input'),
component: 'Input'
},
{
field: 'field19',
label: `${t('formDemo.treeSelect')}`,
component: 'TreeSelect',
// 远程加载option
optionApi: async () => {
const res = await getTreeSelectData()
return res
}
}
])