html
<div v-for="(item, index) in formData.liuchengs" :key="index"> <el-form-item label="流程:" :prop="'liuchengs.' + index + '.no'" :rules="{required: true, message: '', trigger: 'blur'}"> <el-input v-model="item.no" :clearable="true" style="width: 250px;" placeholder="请输入" /> </el-form-item> <el-form-item label="件数:" :prop="'liuchengs.' + index + '.num'" :rules="{required: true, message: '', trigger: 'blur'}"> <el-input v-model="item.num" :clearable="true" style="width: 250px;" placeholder="请输入" /> </el-form-item> <el-form-item label="问题" :prop="'liuchengs.' + index + '.qus'"> <el-input v-model="item.qus" :clearable="true" style="width: 150px;" placeholder="请输入" /> </el-form-item> <el-button @click="delListItem(index)" type="danger">删 除</el-button> <!-- <el-button @click="addListItem" type="primary">添 加</el-button> --> </div> <el-button @click="addListItem" type="primary">添 加</el-button>
js
<script> export default { data() { return { formData: { liuchengs: [{ no: '', num: '', qus: '', }], } }; }, methods: { addListItem() { this.formData.liuchengs.push({ no: '', num: '', qus: '', }); }, delListItem(index) { if(this.formData.liuchengs.length > 1){ this.formData.liuchengs.splice(index,1); }else{ this.$alert('最后一个无法删除!', '提示信息', { confirmButtonText: '确定' }); } }, }, } </script>
实例
标签:index,qus,vue,no,formData,num,使用,liuchengs From: https://www.cnblogs.com/cmooc/p/16876805.html