vue 添加刪除子元素

顯示效果：

 

 代碼：

<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>

View Code