This article shares the specific codes for dynamic new and deleted vue-iview for your reference. The specific content is as follows
Reference link:vue iview dynamically add and delete
I made test and minor modifications based on the above blog, and the effect is as follows:
The source code is as follows:
html code
<template>
<Form ref="capsuleAttr" :model="capsuleAttr" :label-width="100" style="width: 80%">
<ul>
<li v-for="(item, index) in " v-if="" :key="index">
<FormItem
style="width:80%;"
label="Attribute Name:"
:prop="'attrList.' + index + '.AttrName'"
:rules="{required: true, message: 'Property name cannot be empty', trigger: 'blur'}"
>
<Col span="7">
<Input ="" placeholder="Attribute Name" />
</Col>
<Col span="2" style="margin-left:20%;">
<Button @click="handleRemove(item,index)" type="error" icon="md-close">delete</Button>
</Col>
</FormItem>
<FormItem
style="width:80%;"
label="temperature:"
:prop="'attrList.' + index + '.Temperature'"
:rules="{required: true, message: 'Temperature cannot be empty', trigger: 'blur',type:'string', transform(val) {
return String(val)}}"
>
<Input ="" placeholder="temperature" />
</FormItem>
<FormItem
style="width:80%;"
label="flow:"
:prop="'attrList.' + index + '.Volume'"
:rules="{required: true, message: 'Traffic cannot be empty', trigger: 'blur'}"
>
<Input ="" placeholder="flow" />
</FormItem>
<FormItem label="Recommended traffic:" style="width:80%;">
<Input ="" placeholder="flow" />
</FormItem>
<FormItem label="Breathing time:" style="width:80%;">
<Input ="" placeholder="Breathing time" />
</FormItem>
<FormItem label="Immersion time:" style="width:80%;">
<Input ="" placeholder="Immersion time" />
</FormItem>
<FormItem
label="Operation process description:"
style="width:80%;"
:prop="'attrList.' + index + '.WorkDesc'"
:rules="{required: true, message: 'The description of the job process cannot be empty', trigger: 'blur'}"
>
<Input
v-model=""
type="textarea"
:autosize="{minRows: 5,maxRows: 10}"
placeholder="Enter a job process description..."
/>
</FormItem>
<FormItem style="width:80%;" label="Job order:">
<!-- :rules="ruleWorkSort" -->
<Input ="" placeholder="Operation order" />
</FormItem>
<Divider dashed />
</li>
</ul>
<FormItem>
<Row>
<Col span="8">
<Button type="dashed" long @click="handleAttrAdd" icon="md-add">Add properties</Button>
</Col>
</Row>
</FormItem>
<FormItem>
<Button type="primary" @click="handleAttrSubmit('capsuleAttr')">save</Button>
<Button @click="$( -1)" style="margin-left: 8px">return</Button>
</FormItem>
</Form>
</template>
JS Code
<script>
export default {
data () {
return {
capsuleAttr: {
// Capsule properties index: 1,
attrList: [
{
AttrName: '',
Temperature: '',
Volume: '',
CapsuleId: '', // Attribute ID RcommendVolume: '', // Recommended traffic WorkDesc: '',
Blow: '', // Blow time Soak: '', // Immersion time WorkSort: '',
index: 1,
status: 1
}
]
}
}
},
method: {
// Add properties handleAttrAdd () {
++
({
AttrName: '',
Temperature: '',
Volume: '',
WorkDesc: '',
WorkSort: '',
RcommendVolume: '', // Recommended traffic Blow: '', // Blow time Soak: '', // Immersion time index: ,
status: 1
})
},
handleRemove (item, index) {
()
if () {
this.$({
title: 'Delete this record',
onOk: () => {
().then(res => {
if () {
[index].status = 0
this.$('Delete successfully')
}
})
},
onCancel: () => {
('onCancel')
}
})
return
}
[index].status = 0
},
// Capsule attributes saved and added handleAttrSubmit (name) {
this.$refs[name].validate(valid => {
if (valid) {
if () {
()
} else {
if () {
()
} else {
this.$('Please save the capsule data first')
}
}
} else {
this.$('Save failed!')
}
})
}
}
}
</script>
Regarding the tutorial on components, please click on the topicComponent learning tutorialCarry out learning.
For more vue learning tutorials, please read the topic"Vue Practical Tutorial"
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.