vue 添加删除子元素
显示效果:
代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <!-- 商家端-添加分期规则 --> <div class="divisionForm"> <el-button @click="dialogFormVisible = true">新增分期规则</el-button> <el-dialog title="添加分期规则" :visible.sync="dialogFormVisible"> <el-form :model="divisionForm" label-width="120px"> <el-row> <el-col :span="16"> <el-form-item label="分期名称" prop="name"> <el-input v-model="divisionForm.name" placeholder='输入分期名称'></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="16"> <el-form-item label="信保金比例" prop="guaranteeMoney"> <el-input v-model="divisionForm.guaranteeMoney" placeholder='输入0-100的数字'></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="17"> <el-form-item label="分期期数" prop="lists" style="margin-bottom: 0;"> <div ref="fenqi" class="fenqi"> <ul> <li class="item" v-for='(list,index) in divisionForm.lists' :key='index'> <span class="fenqi_span">{{index + 1}}</span> <input class="fenqi_input" v-model="list.percent" placeholder='输入0-100的数字' style="display: inline-block;"/> <span class="fenqi_percent">(%)</span> <i v-if="index==0" class="el-icon-circle-plus-outline" @click="addNumber"></i> <i v-else class="el-icon-remove-outline" @click="delNumber(index)"></i> </li> </ul> </div> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="16"> <el-form-item label="排序" prop="formsort"> <el-input-number v-model="divisionForm.formsort" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="16"> <el-form-item label="分期说明" prop="explain"> <el-input v-model="divisionForm.explain" placeholder='输入分期说明'></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="16"> <el-form-item label="备注" prop="remarks"> <el-input v-model="divisionForm.remarks" placeholder='输入备注'></el-input> </el-form-item> </el-col> </el-row> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogFormVisible = false">取 消</el-button> <el-button type="primary" @click="addDivisionRule">保 存</el-button> </div> </el-dialog> </div> </template> <script> import Vue from 'vue'; import {Button,Form,FormItem,Dialog,Input,Row,Col,Icon} from 'element-ui'; Vue.use(Button).use(Form).use(FormItem).use(Dialog).use(Input).use(Row).use(Col).use(Icon); export default { data() { return { dialogFormVisible: false, inputLable: 1, divisionForm: { name: '',//分期名称 guaranteeMoney: '',//信保金比例 lists: [ { percent:''} ],//分期期数数组 formsort: 1,//排序 explain: '',//分期说明 remarks: ''//备注 } } }, created() { }, mounted() { }, watch: { }, methods: { //保存分期规则 addDivisionRule() { console.log(this.divisionForm); let lists = this.divisionForm.lists; let sum = 0; for(var i=0;i<lists.length;i++){ sum += parseFloat(lists[i].percent); if(lists[i].percent == ''){ this.$layerMessage.error('付款比例不能为空!'); return } } // console.log(sum); if(sum !== 100){ this.$layerMessage.error('付款比例的和应等于100%!'); }else{ //其他表单内容用rules限制格式 //1.验证表单通过后调用保存表单接口 //XXXXXXXXXXXXXXXXX //2.关闭弹框 this.dialogFormVisible = false; } }, //新增分期期数 addNumber(){ let list = { percent: "" }; this.divisionForm.lists.push(list); }, //删除分期期数 delNumber(index) { this.divisionForm.lists.splice(index, 1); }, // 修改排序 handleChange(value) { console.log(value); } } } </script> <style type="text/scss" lang="scss" scoped> .divisionForm { /deep/ .el-dialog { min-width: 830px; } } .fenqi { .item { margin-bottom: 20px; input::-webkit-input-placeholder { color: #bbb; } input:-moz-input-placeholder { color: #bbb; } input::-moz-input-placeholder { color: #bbb; } input:-ms-input-placeholder { color: #bbb; } .fenqi_span { width: 80px; text-align: center; color: #999; margin-right: 20px; } .fenqi_input { width: 258px; margin-right: 8px; } .fenqi_percent { color: #aaa; margin-right: 20px; font-size: 18px; } /deep/ { .el-icon-circle-plus-outline,.el-icon-remove-outline { color: #aaa; font-size: 24px; } } .fenqi_span,.fenqi_input { -webkit-appearance: none; background-color: #FFF; background-image: none; border-radius: 4px; border: 1px solid #DCDFE6; -webkit-box-sizing: border-box; box-sizing: border-box; color: #606266; display: inline-block; font-size: inherit; height: 40px; line-height: 40px; outline: 0; padding: 0 15px; -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1); transition: border-color .2s cubic-bezier(.645,.045,.355,1); } } } </style>