Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
zuiqiangwanggong
vue-vben-admin
提交
a5ff5923
V
vue-vben-admin
项目概览
zuiqiangwanggong
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
a5ff5923
编写于
8月 17, 2021
作者:
无
无木
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(form): component `Divider` support `helpMessage`
Divider表单组件支持helpMessage配置
上级
65735926
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
89 addition
and
16 deletion
+89
-16
src/components/Form/src/components/FormItem.vue
src/components/Form/src/components/FormItem.vue
+2
-2
src/views/demo/form/index.vue
src/views/demo/form/index.vue
+87
-14
未找到文件。
src/components/Form/src/components/FormItem.vue
浏览文件 @
a5ff5923
...
...
@@ -306,14 +306,14 @@
}
function
renderItem
()
{
const
{
itemProps
,
slot
,
render
,
field
,
suffix
,
component
,
label
}
=
props
.
schema
;
const
{
itemProps
,
slot
,
render
,
field
,
suffix
,
component
}
=
props
.
schema
;
const
{
labelCol
,
wrapperCol
}
=
unref
(
itemLabelWidthProp
);
const
{
colon
}
=
props
.
formProps
;
if
(
component
===
'
Divider
'
)
{
return
(
<
Col
span
=
{
24
}
>
<
Divider
{...
unref
(
getComponentsProps
)}
>
{
label
}
<
/Divider
>
<
Divider
{...
unref
(
getComponentsProps
)}
>
{
renderLabelHelpMessage
()
}
<
/Divider
>
<
/Col
>
);
}
else
{
...
...
src/views/demo/form/index.vue
浏览文件 @
a5ff5923
...
...
@@ -9,6 +9,24 @@
@submit="handleSubmit"
@reset="handleReset"
>
<template
#selectA
="
{ model, field }">
<a-select
:options=
"optionsA"
mode=
"multiple"
v-model:value=
"model[field]"
@
change=
"valueSelectA = model[field]"
allowClear
/>
</
template
>
<
template
#selectB=
"{ model, field }"
>
<a-select
:options=
"optionsB"
mode=
"multiple"
v-model:value=
"model[field]"
@
change=
"valueSelectB = model[field]"
allowClear
/>
</
template
>
<
template
#localSearch=
"{ model, field }"
>
<ApiSelect
:api=
"optionsListApi"
...
...
@@ -47,6 +65,26 @@
import
{
optionsListApi
}
from
'
/@/api/demo/select
'
;
import
{
useDebounceFn
}
from
'
@vueuse/core
'
;
import
{
treeOptionsListApi
}
from
'
/@/api/demo/tree
'
;
import
{
Select
}
from
'
ant-design-vue
'
;
import
{
cloneDeep
}
from
'
lodash-es
'
;
const
valueSelectA
=
ref
<
string
[]
>
([]);
const
valueSelectB
=
ref
<
string
[]
>
([]);
const
options
=
ref
<
Recordable
[]
>
([]);
for
(
let
i
=
1
;
i
<
10
;
i
++
)
options
.
value
.
push
({
label
:
'
选项
'
+
i
,
value
:
`
${
i
}
`
});
const
optionsA
=
computed
(()
=>
{
return
cloneDeep
(
unref
(
options
)).
map
((
op
)
=>
{
op
.
disabled
=
unref
(
valueSelectB
).
indexOf
(
op
.
value
)
!==
-
1
;
return
op
;
});
});
const
optionsB
=
computed
(()
=>
{
return
cloneDeep
(
unref
(
options
)).
map
((
op
)
=>
{
op
.
disabled
=
unref
(
valueSelectA
).
indexOf
(
op
.
value
)
!==
-
1
;
return
op
;
});
});
const
provincesOptions
=
[
{
...
...
@@ -101,7 +139,7 @@
const
schemas
:
FormSchema
[]
=
[
{
field
:
''
,
field
:
'
divider-basic
'
,
component
:
'
Divider
'
,
label
:
'
基础字段
'
,
},
...
...
@@ -299,7 +337,7 @@
},
},
{
field
:
''
,
field
:
'
divider-api-select
'
,
component
:
'
Divider
'
,
label
:
'
远程下拉演示
'
,
},
...
...
@@ -373,18 +411,9 @@
},
},
{
field
:
''
,
field
:
'
divider-linked
'
,
component
:
'
Divider
'
,
label
:
'
其它
'
,
},
{
field
:
'
field20
'
,
component
:
'
InputNumber
'
,
label
:
'
字段20
'
,
required
:
true
,
colProps
:
{
span
:
8
,
},
label
:
'
字段联动
'
,
},
{
field
:
'
province
'
,
...
...
@@ -431,6 +460,46 @@
placeholder
:
'
省份与城市联动
'
,
},
},
{
field
:
'
divider-selects
'
,
component
:
'
Divider
'
,
label
:
'
互斥多选
'
,
helpMessage
:
[
'
两个Select共用数据源
'
,
'
但不可选择对方已选中的项目
'
],
},
{
field
:
'
selectA
'
,
component
:
'
Select
'
,
label
:
'
互斥SelectA
'
,
slot
:
'
selectA
'
,
defaultValue
:
[],
colProps
:
{
span
:
8
,
},
},
{
field
:
'
selectB
'
,
component
:
'
Select
'
,
label
:
'
互斥SelectB
'
,
slot
:
'
selectB
'
,
defaultValue
:
[],
colProps
:
{
span
:
8
,
},
},
{
field
:
'
divider-others
'
,
component
:
'
Divider
'
,
label
:
'
其它
'
,
},
{
field
:
'
field20
'
,
component
:
'
InputNumber
'
,
label
:
'
字段20
'
,
required
:
true
,
colProps
:
{
span
:
8
,
},
},
{
field
:
'
field21
'
,
component
:
'
Slider
'
,
...
...
@@ -464,7 +533,7 @@
];
export
default
defineComponent
({
components
:
{
BasicForm
,
CollapseContainer
,
PageWrapper
,
ApiSelect
},
components
:
{
BasicForm
,
CollapseContainer
,
PageWrapper
,
ApiSelect
,
ASelect
:
Select
},
setup
()
{
const
check
=
ref
(
null
);
const
{
createMessage
}
=
useMessage
();
...
...
@@ -479,6 +548,10 @@
return
{
schemas
,
optionsListApi
,
optionsA
,
optionsB
,
valueSelectA
,
valueSelectB
,
onSearch
:
useDebounceFn
(
onSearch
,
300
),
searchParams
,
handleReset
:
()
=>
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录