vue动态增加,删除表单输入框

效果如下:

参考代码:

后端url: disparamModule/disparamInit返回的数据结构

一. html代码

<div class="distribution-set-container">
  <!-- 面包屑导航 -->
  <Bread :fromFather="dataPath"></Bread>
  <!-- 主体内容 -->
  <div class="content">
    <!-- 等级升级及所需积分设置 -->
    <div class="upgrade">
      <div class="title">
        <h3>等级升级及所需积分设置</h3>
        <div class="numButton">
          <a href="#" @click.prevent="addGrade">新增等级</a>
          <a href="#" @click.prevent="delGrade">删除等级</a>
        </div>
      </div>

      <div
        class="list"
        v-for="(item,index) in numData.userLev"
        :key="index"
        v-show="index+1 <= showNumber"
      >
        <span>{{ item.code | fmtgrade }}</span
        ><input v-model="item.remarks" /> <span>升级所需积分数</span
        ><input v-model="item.codeValue" />
      </div>
    </div>
  </div>
</div>

二. css(less)代码

.distribution-set-container {
  color: #000;
  .content {
    text-align: left;
    height: 710px;
    width: 100%;
    background-color: #fff;
    box-shadow: 2px 2px 5px #e6e6e6;
    box-sizing: border-box;
    overflow-x: auto;
    .upgrade {
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80px;
        .numButton {
          a {
            display: inline-block;
            width: 100px;
            height: 24px;
            background-color: #0085f4;
            text-align: center;
            margin-left: 30px;
            color: #fff;
          }
        }
      }
      .list {
        padding: 0 14px;
        height: 60px;
        line-height: 60px;
        background-color: #f5faff;
        span {
          margin-right: 18px;
          vertical-align: middle;
        }
        input {
          margin-right: 80px;
          border: 1px solid #0085f4;
          height: 24px;
          vertical-align: middle;
          padding: 0 10px;
          width: 100px;
        }
      }
    }
  }
}

三. js代码

import Bread from '../../components/Bread.vue'

export default {
  name: 'distribution-set',
  components: {
    Bread // 注册面包屑组件
  },
  data() {
    return {
      dataPath: [
        {
          name: '分销参数设置',
          path: 'distribution-set'
        }
      ], // 面包屑数据
      numData: {}, // 总数据
      showNumber: 0
    }
  },
  filters: {
    // 局部过滤器,英文等级转中文
    fmtgrade(grade) {
      switch (grade) {
        case 'one':
          grade = '一级'
          break
        case 'two':
          grade = '二级'
          break
        case 'three':
          grade = '三级'
          break
        case 'four':
          grade = '四级'
          break
        case 'five':
          grade = '五级'
          break
        case 'six':
          grade = '六级'
          break
        case 'seven':
          grade = '七级'
          break
        case 'eight':
          grade = '八级'
          break
        case 'nine':
          grade = '九级'
          break
        case 'ten':
          grade = '十级'
          break
      }
      return grade
    }
  },
  methods: {
    // 获取初始化分销参数
    async getdisparamInitData() {
      let res = await this.$http({
        method: 'get',
        url: 'disparamModule/disparamInit'
      })
      if (res.data.code === '0') {
        res.data.data.userLev.forEach((item, index) => {
          if (item.remarks === null) {
            return
          } else {
            this.showNumber++
          }
        })
        this.numData = res.data.data
      }
    },
    addGrade() {
      if (this.showNumber <= 10) {
        // 寻找最后一个输入框
        if (this.numData.userLev[this.showNumber - 1].remarks === null) {
          this.$message({
            message: '上一级必须填写才能增加哦!',
            type: 'warning'
          })
        } else {
          this.showNumber++
        }
      } else {
        this.$message({
          message: '最多只能拥有十级哦!',
          type: 'warning'
        })
      }
    },
    delGrade() {
      if (this.showNumber > 1) {
        // 寻找最后一个输入框
        this.numData.userLev[this.showNumber - 1].remarks = null
        this.numData.userLev[this.showNumber - 1].codeValue = '0'
        this.showNumber--
      } else {
        this.$message({
          message: '不能再减少了!',
          type: 'warning'
        })
      }
    }
  },
  created() {
    // 初始化分销参数
    this.getdisparamInitData()
  }
}