elementUI 动态增减表单并非空验证

elementUI 动态增减表单并添加了非空验证

效果图如下

后端返回详情接口样式

动态表单验证关键在prop的对象一定是当前我们数据定义的，比如我的是headId
:prop="‘dynamicItem.’ + index + ‘.heatId’"
:rules="{required: true,message: ‘请选择领导人’,trigger: ‘change’,}"

所以总结起来的语法就是:prop="‘v-for绑定的数组.’ + index + ‘.v-model绑定的变量’"

页面模块

<el-form-item
   class="draggableData"
   v-for="(item, index) in form.dynamicItem"
   :key="'item.' + index"
   value-key="heatId"
   :label="'领导人'"
   :prop="'dynamicItem.' + index + '.heatId'"
   :rules="{required: true,message: '请选择领导人',trigger: 'change',}"
    >
      <el-select
         @visible-change="visibleChange"
         id="selectItem"
         ref="selectItem"
         @change="changeDynamicItem($event, index)"
         v-model="item.heatId"
         value-key="heatId"
         class="longselect"
         filterable
         placeholder="请选择领导人" >
             <el-option
                v-for="item2 in leadersOption"
                :key="item2.heatId"
                :label="item2.heatName"
                :value="item2.heatId"
              ></el-option>
       </el-select>
        <a
           class="my-iconfont icontianjia"
           @click="addItem(item, index)"
        ></a>
        <a
           class="my-iconfont iconshanchu1"
           @click="deleteItem(item, index)"
           v-show="index !== 0"
        ></a>
 </el-form-item>

js模块

//data数据
leaderList: [], //领导人
form: {
   dynamicItem: [{ heatId: '' }],
 },

created() {
    this.getData();
  },

method:{
	// 获取列表和详情
    async getData() {
      const params1 = {
        limit: -1,
      };
      const configRes1 = await 获取下拉框总列表接口(params1);
      if (configRes1.resp_code === 0) {
        this.leadersOption = configRes1.datas;
      }
      const params = {
        types: [1, 2, 3],
      };
      const configRes = await 获取详情接口(params);
      if (configRes.resp_code === 0 && configRes.datas) {
        //后端返回的数据处理
        if (
          configRes.datas.leaderOpinion &&
          configRes.datas.leaderOpinion.length > 0
        ) {
          this.form.dynamicItem = configRes.datas.leaderOpinion.map((item) => ({
            heatId: item.cockpitConfigDetail,
          }));
        }
		//没有返回数据默认添加一个空数据，否则一条不显示无法添加
        if (!this.form.dynamicItem) {
          const arr = [
            {
              id: '',
              heatId: '',
              cockpitConfigRank: 1,
            },
          ];
          this.form.dynamicItem = arr;
          this.leaderList = arr;
        } else {
          this.dynamicItemFilter();
        }
      }
    },
   //#region 领导模块
    // 添加领导人
    addItem(item, index) {
      if (
        this.form.dynamicItem.length < 20 &&
        this.form.dynamicItem.length >= 0
      ) {
        this.form.dynamicItem.splice(index + 1, 0, {
          heatId: '',
        });
      } else {
        this.$message.error('领导人只能添加20条');
      }
      this.leaderList = [];
      this.dynamicItemFilter();
    },
    // 删除领导人
    deleteItem(item, index) {
      this.form.dynamicItem.splice(index, 1);
      this.leaderList = [];
      this.dynamicItemFilter();
    },
    // 领导人下拉框
    changeDynamicItem(heatId, index) {
      this.form.dynamicItem[index].heatId = heatId;
      this.leaderList[index].heatId = heatId;
    },
    // 处理领导人数据
    dynamicItemFilter() {
      this.form.dynamicItem.forEach((item, index) => {
        this.leaderList.push({
          id: '',
          heatId: item.heatId,
          cockpitConfigRank: index + 1,
        });
      });
    },
}