參考elementUI官網以及網上的其他一些資料。話不多說，直接貼代碼。
htmt部分：
<
div
id
="
app
"
style
="
width: 500px;
">
<
el-form
:model
="
environmentForm
"
ref
="
environmentForm
">
<
el-row
:gutter
="
24
"
v-for
="
(item, index) in environmentForm.items
"
:key
="
item.key
">
<
el-col
:span
="
6
">
<
el-form-item
:prop
="
'items.' + index + '.name'
"
:rules
="
{required: true, message: '名稱不能為空', trigger: 'blur'}
">
<
el-input
v-model
="
item.name
"></
el-input
>
</
el-form-item
>
</
el-col
>
<
el-col
:span
="
6
">
<
el-form-item
:prop
="
'items.' + index + '.variable'
"
:rules
="
{required: true, message: '變量值不能為空', trigger: 'blur'}
">
<
el-input
v-model
="
item.variable
"></
el-input
>
</
el-form-item
>
</
el-col
>
<
el-col
:span
="
3
"
v-if
="
environmentForm.items.length !== 1
">
<
el-button
@click
="
removeEnvironmentForm(item)
"
class
="
el-icon-delete
"
size
="
mini
"
circle
>
</
el-button
>
</
el-col
>
<
el-col
:span
="
3
">
<
el-button
@click
="
addEnvironmentForm
"
size
="
mini
"
class
="
el-icon-plus
"
circle
></
el-button
>
</
el-col
>
</
el-row
>
<
el-form-item
>
<
el-button
type
="
primary
"
@click
="
submitForm('environmentForm')
">提交
</
el-button
>
<
el-button
@click
="
resetForm('environmentForm')
">重置
</
el-button
>
</
el-form-item
>
</
el-form
>
</
div
>
<
script
>
var vm
;
$(
function
()
{
vm
=
new Vue(
{
el
:
'
#app
'
,
data
:
{
environmentForm
:
{
items
: [
{
name
:
''
,
variable
:
''
,
}]
}
},
mounted
:
function
()
{},
methods
:
{
resetForm
(
formName
)
{
this
.$refs[formName]
.
resetFields()
;
},
removeEnvironmentForm
(
item
)
{
var index
=
this
.environmentForm
.items
.
indexOf(item)
if (index
!==
-
1)
{
this
.environmentForm
.items
.
splice(index
,
1)
}
},
addEnvironmentForm
()
{
this
.environmentForm
.items
.
push(
{
name
:
''
,
variable
:
''
,
description
:
''
,
key
:
Date
.
now()
})
;
},
}
})
})
</
script
>
實現效果:單個時
多個時顯示刪除按鈕
