對(duì)象數(shù)組動(dòng)態(tài)添加校驗(yàn)和下拉全選

參考鏈接
效果圖
Element-ui 下拉列表 全選 多選時(shí) select全選 新增一個(gè)選擇所有的選項(xiàng)

<template>
  <div>
    <el-form :model="formData3" :inline="true" ref="formData3" label-width="65px" size="medium">
      <el-row v-for="(item,index) in formData3.powerAttrList" :key="index" style="border-bottom: 1px solid #f0f0f0;padding: 10px;">
        <el-form-item label="參數(shù)名" :prop="'powerAttrList.' + index + '.fieldName'" :rules="[{ required: true, message: '參數(shù)名不能為空',trigger: 'change'},{max: 32, message: '不超過(guò)32個(gè)字符', trigger: 'change'}]">
          <el-input v-model="item.fieldName" placeholder="請(qǐng)輸入?yún)?shù)名" />
        </el-form-item>
        <el-form-item label="時(shí)間" :prop="'powerAttrList.' + index + '.fieldTime'" :rules="[{ required: true, message: '時(shí)間不能為空',trigger: 'change'}]">
          <el-date-picker v-model="item.fieldTime" type="daterange" start-placeholder="開(kāi)始日期" end-placeholder="結(jié)束日期" value-format="yyyy-MM-dd" :default-time="['00:00:00', '23:59:59']"></el-date-picker>
        </el-form-item>
        <el-form-item label="描述" :prop="'powerAttrList.' + index + '.fieldDesc'" :rules="[{ required: true, message: '描述不能為空',trigger: 'change'}]">
          <el-select @change="(e)=>{selectChange(e,index)}" multiple  clearable v-model="item.fieldDesc" placeholder="請(qǐng)選擇描述">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" :prop="'powerAttrList.' + index + '.fieldSort'" :rules="moreRules.fieldSort">
          <el-input type="number" v-model="item.fieldSort" autocomplete="off" placeholder="請(qǐng)輸入排序" />
        </el-form-item>
        <el-button type="danger" v-if="formData3.powerAttrList.length > 1" size="medium" @click="removeRow(index)">刪除</el-button>
      </el-row>
      <el-row>
        <el-button type="primary" size="medium" @click="addRow">新增屬性</el-button>
        <el-button type="primary" size="medium" @click="submit('formData3')">提交</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
data() {
    return {
      // select下拉項(xiàng)
      options: [
        {
          value: "ALL",
          label: "全部"
        },
        {
          value: "選項(xiàng)1",
          label: "黃金糕"
        },
        {
          value: "選項(xiàng)2",
          label: "雙皮奶"
        }
      ],
      // form表單
      formData3: {
        powerAttrList: [
          {
            fieldName: "",
            fieldSort: "",
            fieldDesc: ['ALL'],
            oldFieldDesc:['ALL'],
            fieldTime: ""
          }
        ]
      },
      // 新增表單的驗(yàn)證規(guī)則
      moreRules: {
        fieldSort: [
          { required: true, message: "請(qǐng)輸入排序", trigger: "change" },
          {
            validator: (rule, value, callback) => {
              if (value < 0) {
                callback(new Error("必須大于0"));
              } else if (value.length > 5) {
                callback(new Error("不超過(guò)5位數(shù)字"));
              } else if (!value) {
                callback(new Error("排序不能為空"));
              } else {
                callback();
              }
            },
            trigger: "change"
          }
        ]
      }
    };
  },
  methods: {
    // 添加
    addRow() {
      this.formData3.powerAttrList.push({
        fieldName: "",
        fieldSort: "",
        fieldDesc: ['ALL'],
        oldFieldDesc:['ALL'],
        fieldTime: ""
      });
    },
    // 刪除屬性列
    removeRow(index) {
      this.formData3.powerAttrList.splice(index, 1);
    },
    // 提交
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(this.formData3);
        if (valid) {
          alert("submit!");
        } else {
          return false;
        }
      });
    },
    // 選擇描述的時(shí)候，設(shè)置排序值
    selectChange(val, index) {
        this.formData3.powerAttrList.forEach((re,findex) =>{
            if(findex === index) {
                let oldIndex = re.oldFieldDesc.indexOf('ALL')  //獲取val和oldval里all的索引,如果沒(méi)有則返回-1
                let newIndex = val.indexOf('ALL')
                if(newIndex !=-1 && oldIndex == -1 && val.length >1){ //如果新的選擇里有勾選了選擇所有選擇所有 則 只直線勾選所有整個(gè)選項(xiàng)
                    re.fieldDesc = ['ALL']
                }else if(newIndex !=-1 && oldIndex != -1 && val.length >1){  //如果操作前有勾選了選擇所有且當(dāng)前也選中了勾選所有且勾選數(shù)量大于1  則移除掉勾選所有
                    re.fieldDesc.splice(val.indexOf('ALL'),1)
                }
                // 儲(chǔ)存當(dāng)前最后的結(jié)果 作為下次的老數(shù)據(jù)
                re.oldFieldDesc = re.fieldDesc
            }
        })
      this.formData3.powerAttrList[index].fieldSort = index + 1;
    }
  }
}
</script>

<style>

</style>