vue elementui 动态追加下拉框、输入框功能_Vue.js

vue elementui 动态追加下拉框、输入框

上代码：

<template>
  <div>
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="65%"
      @close="onclose"
      :modal-append-to-body="true"
      title="新建"
      custom-class="dialogbox"
      :visible.sync="dialogvisible"
      :lock-scroll="true"
      :destroy-on-close="true">
      <el-form :model="combinationinfo" label-width="90px" ref="combinationform" :rules="rules" :inline="true" size="small">
        <el-row>
          <el-col :span="12">
            <el-form-item prop="benchmarks" label="名称">
              <div style="color: #fb6b3f;width: 230px;">比例之和需为100%(当前
                <span>{{benchmarktotal}}</span>
                <span></span>%)
              </div>
              <div v-for="(item,index) in combinationinfo.benchmarks" :key="index">
                <el-select
                  style="margin-bottom: 10px;"
                  clearable
                  filterable
                  collapse-tags
                  placeholder="请选择"
                  class="benchmarkselectwidth"
                  @change="changebenchmark"
                  v-model="item.code"
                >
                  <el-option
                    v-for="(item1, idx) in list"
                    :key="idx"
                    :label="item1.name"
                    :value="item1.code"
                  >
                  </el-option>
                </el-select>
                <el-input v-model="item.percentage" @input="changepercentage" placeholder="请输入" class="benchmarkinputwidth"></el-input>
                <span style="padding-left: 2px;">%</span>
                <i v-if="index !== 0" style="font-size: 18px;cursor: pointer;padding: 0 0 0 10px;color: #f56c6c;" @click="deleteindex(index)" class="el-icon-remove-outline"></i>
              </div>
              <div v-if="benchmarkrule" style="color: #f56c6c;font-size: 12px;margin-top: -17px">请选择名称</div>
              <el-button @click="addindex" size="mini" type="primary" icon="el-icon-plus">添加</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12">
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align: right;margin-top: 20px;">
        <el-button size="mini" @click="onclose()">取 消</el-button>
        <el-button
          size="mini"
          type="primary"
          @click="onconfirm()"
          >提 交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

data() {
    return {
      dialogvisible: false,
      combinationinfo: {
        benchmarks: [
          {
            code: '',
            name: '',
            percentage: '',
          }
        ]
      },
      rules: {
        benchmarks: [{ required: true }],
      },
      benchmarkrule: false,
      benchmarktotal: 0,
      list: [
        {
          name: 'aaa',
          code: '111',
        },
        {
          name: 'bbb',
          code: '222',
        },
        {
          name: 'ccc',
          code: '333',
        },
      ],
    }
  },
methods: {
 // 添加
    addindex () {
      this.combinationinfo.benchmarks.push({
        code: '',
        percentage: '',
      })
    },
    // 删除
    deleteindex (index) {
      this.combinationinfo.benchmarks.splice(index,1)
      this.changepercentage()
    },
    changebenchmark (val) {
      if (this.combinationinfo.benchmarks.length && this.combinationinfo.benchmarks.length > 1) {
        if (!this.isrepeat(this.combinationinfo.benchmarks,'code')) {
          this.$message.warning('所选名称不能重复！')
          return
        }
      }
    },
     // 判断数组中是否有重复数据（true 不存在；false 存在重复）
    isrepeat(arr, key) {
      var obj = {};
      for (let i = 0; i < arr.length; i ++) {
          if (obj[arr[i][key]]) {
              return false;    // 存在
          } else {
            obj[arr[i][key]] = arr[i];
          }
      }
      return true;
    },
    // 名称值变化时
    changepercentage (val) {
      this.benchmarktotal = 0
      if (this.combinationinfo.benchmarks.length && this.combinationinfo.benchmarks.length > 0) {
        for(let i = 0; i < this.combinationinfo.benchmarks.length; i++) {
          if (this.combinationinfo.benchmarks[i].percentage === '') {
            break
          }
          this.benchmarktotal+=parsefloat(this.combinationinfo.benchmarks[i].percentage)
        }
      }
    },
    // 提交
    onconfirm() {
      if (this.combinationinfo.benchmarks) {
          for(let i = 0; i< this.combinationinfo.benchmarks.length; i++) {
            if (this.combinationinfo.benchmarks[i].code) {
              this.benchmarkrule = false
            } else {
              this.benchmarkrule = true
              return
            }
          }
        }
        if (this.benchmarktotal !== 100) {
          this.$message.warning('名称比例之和需为100%！')
          return
         }
     },
     // 取消
    onclose() {
      this.benchmarkrule = false
      this.dialogvisible = false
    },
},

展示效果图：

在这里插入图片描述