element动态新增表格,并校验规则

315 阅读1分钟

需求

点击按钮 新增时间选择器和一个下拉框

如图

image.png

点击加号后

image.png

<el-form-item label="报名时间:" class="required time-register" :label-width="subsidiaryFormLabelWidth">
  <el-row v-for="(domain, index) in domains" :key="index" style="margin-bottom: 20px">
    <el-col :span="8">
      <el-form-item label="" :prop="`content`+index" :rules="subsidiaryFormRules.content">
        <el-date-picker
            style="width: 160px"
            v-model="domain.content"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="" :prop="`explicit`+index" :rules="subsidiaryFormRules.explicit">
        <el-select
            v-model="domain.explicit"
            placeholder="请选择"
            clearable
            style="width: 100px;"
        >
          <el-option
              v-for="(item,index) in timeList"
              :key="index"
              :label="item"
              :value="item"
          />
        </el-select>
      </el-form-item>
    </el-col>
      <i
          style="font-size: 20px;margin-right: 20px"
          class="el-icon-remove"
          @click.prevent="removeDomain(domain)"
      ></i>
      <i class="el-icon-circle-plus" style="font-size: 20px" @click.prevent="addDomain"></i>
  </el-row>
</el-form-item>
  data(){
    domains: [{
      explicit: '',
      content: ''
    }],
    
    timeList: [
      '上午', '下午', '全天'
    ],

    subsidiaryFormRules: {  //自定义规则,
      content: [{validator: contentValidtor, trigger: "blur"}],
      explicit:[{validator: explicitValidtor, trigger: "change"}],
    }

  }
methods:{
    // 属性名称校验
    removeDomain(item) {
      var index = this.domains.indexOf(item)
      if (index !== 0) {
        this.domains.splice(index, 1)
      }
    },
    addDomain() {
      let _this = this
      console.log(_this.domains, '我为什么是unde啊')
      _this.domains.push({
        value: '',
        key: Date.now()
      });
    },
   }

具体规则具体自己填写,多的就不说,内容很简单,记录工作时遇到的问题