本文实例为大家分享了vue-iview动态新增和删除的具体代码，供大家参考，具体内容如下
参考链接：vue iview动态新增和删除
我根据上面的博客进行了test和小修改，效果如下：
源码如下：
html代码
<template>
<Form ref="capsuleAttr" :model="capsuleAttr" :label-width="100" style="width: 80%">
<ul>
<li v-for="(item, index) in capsuleAttr.attrList" v-if="item.status" :key="index">
<FormItem
style="width:80%;"
label="属性名称："
:prop="'attrList.' + index + '.AttrName'"
:rules="{required: true, message: '属性名称不能为空', trigger: 'blur'}"
>
<Col span="7">
<Input v-model.trim="item.AttrName" placeholder="属性名称" />
</Col>
<Col span="2" style="margin-left:20%;">
<Button @click="handleRemove(item,index)" type="error" icon="md-close">删除</Button>
</Col>
</FormItem>
<FormItem
style="width:80%;"
label="温度："
:prop="'attrList.' + index + '.Temperature'"
:rules="{required: true, message: '温度不能为空', trigger: 'blur',type:'string', transform(val) {
return String(val)}}"
>
<Input v-model.trim="item.Temperature" placeholder="温度" />
</FormItem>
<FormItem
style="width:80%;"
label="流量："
:prop="'attrList.' + index + '.Volume'"
:rules="{required: true, message: '流量不能为空', trigger: 'blur'}"
>
<Input v-model.trim="item.Volume" placeholder="流量" />
</FormItem>
<FormItem label="推荐流量：" style="width:80%;">
<Input v-model.trim="item.RcommendVolume" placeholder="流量" />
</FormItem>
<FormItem label="吹气时间：" style="width:80%;">
<Input v-model.trim="item.Blow" placeholder="吹气时间" />
</FormItem>
<FormItem label="浸泡时间：" style="width:80%;">
<Input v-model.trim="item.Soak" placeholder="浸泡时间" />
</FormItem>
<FormItem
label="作业过程描述："
style="width:80%;"
:prop="'attrList.' + index + '.WorkDesc'"
:rules="{required: true, message: '作业过程描述不能为空', trigger: 'blur'}"
>
<Input
v-model="item.WorkDesc"
type="textarea"
:autosize="{minRows: 5,maxRows: 10}"
placeholder="输入作业过程描述..."
/>
</FormItem>
<FormItem style="width:80%;" label="作业顺序：">
<!-- :rules="ruleWorkSort" -->
<Input v-model.trim="item.WorkSort" placeholder="作业顺序" />
</FormItem>
<Divider dashed />
</li>
</ul>
<FormItem>
<Row>
<Col span="8">
<Button type="dashed" long @click="handleAttrAdd" icon="md-add">增加属性</Button>
</Col>
</Row>
</FormItem>
<FormItem>
<Button type="primary" @click="handleAttrSubmit('capsuleAttr')">保存</Button>
<Button @click="$router.go( -1)" style="margin-left: 8px">返回</Button>
</FormItem>
</Form>
</template>
JS代码
<script>
export default {
data () {
return {
capsuleAttr: {
// 胶囊属性
index: 1,
attrList: [
{
AttrName: '',
Temperature: '',
Volume: '',
CapsuleId: '', // 属性ID
RcommendVolume: '', // 推荐流量
WorkDesc: '',
Blow: '', // 吹气时间
Soak: '', // 浸泡时间
WorkSort: '',
index: 1,
status: 1
}
]
}
}
},
method: {
// 添加属性
handleAttrAdd () {
this.capsuleAttr.index++
this.capsuleAttr.attrList.push({
AttrName: '',
Temperature: '',
Volume: '',
WorkDesc: '',
WorkSort: '',
RcommendVolume: '', // 推荐流量
Blow: '', // 吹气时间
Soak: '', // 浸泡时间
index: this.capsuleAttr.index,
status: 1
})
},
handleRemove (item, index) {
console.log(item.Id)
if (item.Id) {
this.$Modal.confirm({
title: '删除本条记录',
onOk: () => {
ProductModule.getCapsuleAttributeDel(item.Id).then(res => {
if (res.data.Success) {
this.capsuleAttr.attrList[index].status = 0
this.$Message.success('删除成功')
}
})
},
onCancel: () => {
console.log('onCancel')
}
})
return
}
this.capsuleAttr.attrList[index].status = 0
},
// 胶囊属性保存新增
handleAttrSubmit (name) {
this.$refs[name].validate(valid => {
if (valid) {
if (this.userId) {
this.getCapsuleAttrEditAdd()
} else {
if (this.capsuleId) {
this.getSaveAttrCreate()
} else {
this.$Message.error('请先保存胶囊数据')
}
}
} else {
this.$Message.error('保存失败!')
}
})
}
}
}
</script>
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。