一、画面

画面功能说明

1. 最大7个级别
2. 最少显示5个级别，例如，接口返回4条数据，也显示5个input框
3. ‘删除’按钮仅在最后一级存在
4. 当input框有七个时，‘新增级别’按钮消失
5. 每一个input存在表单验证，不能为空
6. input框前面的label，动态级别1、级别2、级别3等等

二、HTML前端代码

 <!-- 级别管理 -->
        <el-dialog
          :close-on-click-modal="false"
          title="级别管理"
          :visible.sync="levelManagement"
          v-if="levelManagement"
          width="600px"
          append-to-body
        >
          <el-form
            :model="dynamicValidateForm"
            :rules="levelManagementRules"
            ref="dynamicValidateForm"
            label-width="100px"
            class="demo-dynamic"
          >
            <el-form-item label="级别名称" style="font-size: 14px"></el-form-item>
            <el-form-item
              v-for="(domain, index) in dynamicValidateForm.domains"
              :label="'级别' + (index + 1) + ':'"
              :key="index"
              :prop="'domains[' + index + '].deptLevelName'"
            >
              <el-input
                v-model="domain.deptLevelName"
                placeholder="请输入级别名称"
                style="width: 70%"
                @focus="focusDeptLevelMethod(domain.deptLevel)"
                clearable
              ></el-input>
              <el-button
                size="small"
                type="danger"
                icon="el-icon-delete"
                class="delete-button"
                @click.prevent="removeDomain(domain, index)"
                :loading="waitCheck"
                v-if="index === dynamicValidateForm.domains.length - 1"
              ></el-button>
            </el-form-item>
            <el-form-item v-if="dynamicValidateForm.domains.length < 7">
              <el-link type="primary" @click="addDomain">+新增级别>></el-link>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="submitLevelMange()">保存</el-button>
            <el-button @click="cancelLevel" class="venus-button-default" size="small">取消</el-button>
          </div>
        </el-dialog>

三、js代码

首先声明form表单数据

data(){
    return{
     dynamicValidateForm: {
            domains: []
          },
    }
}

调用接口，获取已存在级别管理数据

   handleShowLevelManagement() {
   //请求参数
      const requestData = {
        deptLevel: null
      }
      //接口返回数据response
      getUnitLevel(requestData).then((response) => {
        const { code, data } = response
        if (code != 0) return
        //将接口返回的数据排序,deptLevel递增排序
        const sortedData = data.sort((pre, curr) => pre.deptLevel - curr.deptLevel)
        //set方法，将已经排序过的数据，放入model中
        this.$set(this.dynamicValidateForm, 'domains', [])
        //判断级别管理input的数量，showLevelNumber
        if (
          sortedData.length > this.$store.state.settings.defaultLevelManagement &&
          sortedData.length <= this.$store.state.settings.levelManagement
        ) {
          var showLevelNumber = sortedData.length
        } else if (sortedData.length > this.$store.state.settings.levelManagement) {
          var showLevelNumber = this.$store.state.settings.levelManagement
        } else {
          var showLevelNumber = this.$store.state.settings.defaultLevelManagement
        }
        //判断级别管理input的数量,比如当有8条数据，7个input框；7条数据，7个框；6条数据，有6个input框；5条数据，有5个框；4条数据，5个框。
        //排序，假如接口没有按照deptLevel的顺序传递值，此时重新赋值key
        for (let index = 0; index < showLevelNumber; index++) {
          if (sortedData.length > index) {
            this.dynamicValidateForm.domains.push(sortedData[index])
          } else {
          //当接口的数据少于5条时，写空数据，凑够五条数据
            this.dynamicValidateForm.domains.push({
              deptLevelName: '',
              usedCount: 0
            })
          }
        }
        //此时，打开画面
        this.levelManagement = true
      })
    },

接口返回的数据格式，是一个数组

新增级别button功能实现

addDomain() {
      this.dynamicValidateForm.domains.push({
        deptLevelName: '',
        usedCount: 0
      })
    },

删除功能Button功能实现

    async removeDomain(domain, index) {
    //因为只有最后一个input框，有删除按钮，此时的index铁定为最大值
      if (!domain.id) {
      //删除数组中的最后一个数据
        this.dynamicValidateForm.domains.splice(index, 1)
        return
      }
      this.waitCheck = true
      try {
      //业务需求，调用接口判断当前级别是否可以删除
        const { code, data } = await checkLevelIsUsed(domain.deptLevel)
        if (code != 0) return
        if (data) {
          this.$message.warning(`当前级别已有单位存在，不允许删除`)
        } else {
          this.dynamicValidateForm.domains.splice(index, 1)
        }
      } catch (error) {
      } finally {
        this.waitCheck = false
      }
    },

每一个input内容验证

这里写在了watch里，即页面内容变动，就会触发改方法

  watch: {
    'dynamicValidateForm.domains'() {
      const ruls = {}
      this.dynamicValidateForm.domains.map((v, i) => {
        ruls[`domains[${i}].deptLevelName`] = [
          {
            required: true,
            validator: this.validateDeptLevel,
            trigger: ['blur', 'change']
          }
        ]
      })
      this.$set(this, 'levelManagementRules', ruls)
    }
  },
  methods:{
    //级别名称,验证每一个框
    validateDeptLevel(rule, value, callback) {
      if (!value || (value && !value.trim())) {
      //input框，不能为空
        callback(new Error('请输入当前级别名称'))
      } else {
      //请输入汉字、数字或者字母、最大20位，汉字占一个字符
        if (this.$utils.vInputLength(value, 1, 20) && /^[\u4e00-\u9fa5a-zA-Z0-9]{1,20}$/.test(value)) {
          callback()
          let params = {
            name: value,
            parentId: this.newUnit.parentId
          }
          // checkDeptLevelUsed(params).then((response) => {
          //   if (!response.data) {
          //     callback();
          //   } else {
          //     callback(new Error("当前单位下的该名称已存在，请重新填写"));
          //   }
          // });
        } else {
          callback(new Error('请输入汉字、数字或者字母、最大20位，汉字占一个字符'))
        }
      }
    },
  }

四、拓展知识

• sort排序：blog.csdn.net/m0_37885651…
• splice删除数组中的一个：www.runoob.com/jsref/jsref…