Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
V
VueElementTemplate
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
JIRA
JIRA
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
黄瑜
VueElementTemplate
Commits
f29bc040
Commit
f29bc040
authored
Feb 23, 2018
by
高天阳
Browse files
Options
Browse Files
Download
Plain Diff
Merge remote-tracking branch 'origin/master'
parents
8c64d2b9
49574a2d
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
20 additions
and
20 deletions
+20
-20
HmComplexForm.md
src/views/haomo/components/forms/HmComplexForm.md
+3
-3
HmComplexForm.vue
src/views/haomo/components/forms/HmComplexForm.vue
+15
-15
index.vue
src/views/haomo/components/forms/index.vue
+2
-2
No files found.
src/views/haomo/components/forms/HmComplexForm.md
View file @
f29bc040
### 基本使用
### 基本使用
```
jsx
```
jsx
<
hm
-
complex
-
form
:
field
s
=
"['username', 'loginid', 'password', 'mobile', 'email']"
<
hm
-
complex
-
form
:
column
s
=
"['username', 'loginid', 'password', 'mobile', 'email']"
:
schema
=
"{
:
schema
=
"{
'model': 'HmUser',
'model': 'HmUser',
'modelPlural': 'HmUsers',
'modelPlural': 'HmUsers',
...
@@ -205,7 +205,7 @@
...
@@ -205,7 +205,7 @@
<
template
>
<
template
>
<div>
<div>
<hm-complex-form
:schema=
"schema['HmUser']"
<hm-complex-form
:schema=
"schema['HmUser']"
:
fields=
"showField
s"
>
:
columns=
"showUserColumn
s"
>
</hm-complex-form>
</hm-complex-form>
</div>
</div>
</
template
>
</
template
>
...
@@ -413,7 +413,7 @@
...
@@ -413,7 +413,7 @@
]
]
}
}
},
},
show
Field
s
:
[
'username'
,
'loginid'
,
'password'
,
'mobile'
,
'email'
]
show
UserColumn
s
:
[
'username'
,
'loginid'
,
'password'
,
'mobile'
,
'email'
]
}
}
},
},
created
()
{
created
()
{
...
...
src/views/haomo/components/forms/HmComplexForm.vue
View file @
f29bc040
...
@@ -8,7 +8,7 @@
...
@@ -8,7 +8,7 @@
<!--表单部分-->
<!--表单部分-->
<el-form
ref=
"form"
:model=
"formModel"
:rules=
"rules"
label-width=
"110px"
<el-form
ref=
"form"
:model=
"formModel"
:rules=
"rules"
label-width=
"110px"
style=
"width:80%;margin:0 auto"
>
style=
"width:80%;margin:0 auto"
>
<el-form-item
v-for=
"(column,index) in show
Field
s"
:key=
"index"
:label=
"column.name"
:prop=
"column.codeCamel"
>
<el-form-item
v-for=
"(column,index) in show
UserColumn
s"
:key=
"index"
:label=
"column.name"
:prop=
"column.codeCamel"
>
<el-input
v-if=
"column.codeCamel==='password'"
type=
"password"
:placeholder=
"column.name"
<el-input
v-if=
"column.codeCamel==='password'"
type=
"password"
:placeholder=
"column.name"
v-model=
"formModel[column.codeCamel]"
></el-input>
v-model=
"formModel[column.codeCamel]"
></el-input>
<el-input
v-if=
"column.codeCamel!=='password'"
:placeholder=
"column.name"
<el-input
v-if=
"column.codeCamel!=='password'"
:placeholder=
"column.name"
...
@@ -58,12 +58,12 @@
...
@@ -58,12 +58,12 @@
/**
/**
* 指定要显示的字段。默认为根据schema得到的所有字段。
* 指定要显示的字段。默认为根据schema得到的所有字段。
*/
*/
field
s
:
{
column
s
:
{
type
:
Array
,
type
:
Array
,
required
:
false
,
required
:
false
,
validator
:
function
(
value
)
{
validator
:
function
(
value
)
{
if
(
typeof
value
!==
'object'
)
{
if
(
typeof
value
!==
'object'
)
{
console
.
warn
(
`传入的
field
s不符合要求,必须是数组`
)
console
.
warn
(
`传入的
column
s不符合要求,必须是数组`
)
return
false
return
false
}
}
...
@@ -75,7 +75,7 @@
...
@@ -75,7 +75,7 @@
return
{
return
{
form
:
null
,
form
:
null
,
formModel
:
{},
// 双向绑定的数据变量
formModel
:
{},
// 双向绑定的数据变量
show
Field
s
:
[],
// 要显示的字段
show
UserColumn
s
:
[],
// 要显示的字段
// form: {
// form: {
// name: '',
// name: '',
// gender: '男',
// gender: '男',
...
@@ -119,34 +119,34 @@
...
@@ -119,34 +119,34 @@
methods
:
{
methods
:
{
init
()
{
init
()
{
const
self
=
this
const
self
=
this
// 如果没有传
field
s,则全部显示
// 如果没有传
column
s,则全部显示
if
(
!
self
.
fields
||
!
self
.
field
s
.
length
)
{
if
(
!
self
.
columns
||
!
self
.
column
s
.
length
)
{
_
.
each
(
self
.
schema
[
'columns'
],
function
(
column
)
{
_
.
each
(
self
.
schema
[
'columns'
],
function
(
column
)
{
const
tmp
=
JSON
.
parse
(
JSON
.
stringify
(
column
))
const
tmp
=
JSON
.
parse
(
JSON
.
stringify
(
column
))
// self.$set(tmp, 'code', tmp.code.toLowerCase())
// self.$set(tmp, 'code', tmp.code.toLowerCase())
self
.
show
Field
s
.
push
(
tmp
)
self
.
show
UserColumn
s
.
push
(
tmp
)
})
})
// console.log(self.show
Field
s)
// console.log(self.show
UserColumn
s)
}
else
{
//
如果传入了field
s,则只显示传入的字段
}
else
{
//
column
s,则只显示传入的字段
self
.
show
Fields
=
JSON
.
parse
(
JSON
.
stringify
(
self
.
field
s
))
self
.
show
UserColumns
=
JSON
.
parse
(
JSON
.
stringify
(
self
.
column
s
))
// console.log('1111111')
// console.log('1111111')
// console.log(self.show
Field
s)
// console.log(self.show
UserColumn
s)
// 将字符串对象进行替换处理
// 将字符串对象进行替换处理
_
.
each
(
self
.
show
Field
s
,
function
(
column
,
index
)
{
_
.
each
(
self
.
show
UserColumn
s
,
function
(
column
,
index
)
{
if
(
typeof
column
===
'string'
)
{
if
(
typeof
column
===
'string'
)
{
// 生成一个新对象
// 生成一个新对象
console
.
log
(
column
)
console
.
log
(
column
)
const
tmp
=
_
.
keyBy
(
self
.
schema
[
'columns'
],
'code'
)[
column
.
toUpperCase
()]
const
tmp
=
_
.
keyBy
(
self
.
schema
[
'columns'
],
'code'
)[
column
.
toUpperCase
()]
// console.log(tmp)
// console.log(tmp)
// self.$set(tmp, 'code', tmp.code.toLowerCase())
// self.$set(tmp, 'code', tmp.code.toLowerCase())
self
.
$set
(
self
.
show
Field
s
,
index
,
tmp
)
self
.
$set
(
self
.
show
UserColumn
s
,
index
,
tmp
)
}
}
})
})
// console.log('2222222')
// console.log('2222222')
console
.
log
(
self
.
show
Field
s
)
console
.
log
(
self
.
show
UserColumn
s
)
}
}
// 提取v-model绑定的变量
// 提取v-model绑定的变量
_
.
each
(
self
.
show
Field
s
,
function
(
item
)
{
_
.
each
(
self
.
show
UserColumn
s
,
function
(
item
)
{
self
.
formModel
[
item
.
codeCamel
]
=
''
self
.
formModel
[
item
.
codeCamel
]
=
''
})
})
console
.
log
(
self
.
formModel
)
console
.
log
(
self
.
formModel
)
...
...
src/views/haomo/components/forms/index.vue
View file @
f29bc040
<
template
>
<
template
>
<div>
<div>
<hm-complex-form
:schema=
"schema['HmUser']"
:
fields=
"showField
s"
>
<hm-complex-form
:schema=
"schema['HmUser']"
:
columns=
"showUserColumn
s"
>
</hm-complex-form>
</hm-complex-form>
</div>
</div>
</
template
>
</
template
>
...
@@ -19,7 +19,7 @@
...
@@ -19,7 +19,7 @@
},
},
data
()
{
data
()
{
return
{
return
{
show
Field
s
:
[
'username'
,
'loginid'
,
'password'
,
'mobile'
,
'email'
]
show
UserColumn
s
:
[
'username'
,
'loginid'
,
'password'
,
'mobile'
,
'email'
]
}
}
},
},
computed
:
{
computed
:
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment