JSFiddle - React, Tailwind, and code Playground

by xs47968224

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<el-form :label-position="'right'" label-width="150px" ref="mainForm" :rules="rules" :model="mainForm" >
<el-button type="text" icon="el-icon-plus" class="new-dom-btn" @click="handleNew()">添加新任务</el-button>
  <section class="content-box" v-for="(task, index) in mainForm.taskList" :key="task.key" :id="'contentBox'+index" >
<el-form-item
  :label="'任务'+index+'开始时间'"
  :prop="'taskList.' + index + '.expectStart'"
  >
  <el-date-picker
    v-model="task.expectStart"
    type="datetime"
    placeholder="任务预估开始时间"
    default-time="09:00:00"
    format="yyyy-MM-dd HH:mm:ss"
    value-format="yyyy-MM-dd HH:mm:ss">
  </el-date-picker>
</el-form-item>
<el-form-item
  :label="'任务'+index+'预估结束时间'"
  :prop="'taskList.' + index + '.expectEnd'"
  :rules="[{
    validator: (rule, value, callback) => { // 动态验证看这里
      // 如果你需要用到index， 这里也可以直接使用： 例 if(index===0){...}
      if (!task.expectStart) {
        return callback('请先设置预估开始时间')
      }
      var startTime = new Date(task.expectStart)
      var endTime = new Date(value) // 这里用 task.expectEnd 是一样的值
      if (startTime >= endTime) {
        return callback('预估结束时间必须大于预估开始时间')
      }
      callback()
    }, trigger: 'blur'
  }]"
  >
  <el-date-picker
    v-model="task.expectEnd"
    type="datetime"
    placeholder="任务预估结束时间"
    default-time="18:00:00"
    format="yyyy-MM-dd HH:mm:ss"
    value-format="yyyy-MM-dd HH:mm:ss">
  </el-date-picker>
</el-form-item>
</section>
</el-form>
</div>

CSS

@import url("//unpkg.com/element-ui/lib/theme-chalk/index.css");

JavaScript

var Main = {
  data() {
    return {
       mainForm: {
        taskList: [{         
          expectStart: '',
          expectEnd: '',       
          key: '1'
        }]
      }
    }
  },
  methods: {
    handleNew() {
      this.mainForm.taskList.unshift({
        expectStart: '',
        expectEnd: '',    
        key: Date.now()
      })
    },
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')