Form 表单选择多个时间段 完成必填校验

一、案例效果

二、案例思路

1. 在 Vue 中，你可以使用 v-for 指令动态渲染多个表单项，并使用 v-model 指令进行双向数据绑定。同时，你可以使用 Element UI 的 Form 组件进行表单验证。
2. 动态定义校验 prop和rules

三、代码案例

html

    <mtd-form-item
        v-for="(item, index) in mainForm.multipleTimeArr"
        :key="index"
        :prop="'multipleTimeArr.' + index"
        :rules="{
          required: true,
          message: '请选择',
        }"
      >
        <div>
          <mtd-date-picker
            v-model="mainForm.multipleTimeArr[index]"
            class="w_440 mt-10"
            type="datetimerange"
            placeholder="开始时间-结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
          <mtd-icon
            name="add-square-o"
            class="icon add-icon"
            @click="handleAddTime"
          ></mtd-icon>
          <mtd-icon
            v-if="mainForm.multipleTimeArr.length > 1"
            name="checkbox-indetermina-o"
            class="icon del-icon"
            @click="handleDelTime(item)"
          ></mtd-icon>
        </div>
      </mtd-form-item>

script

// data 举例
data() {
  return {
    mainForm: {
      multipleTimeArr: [[]]
    },
}


  private handleAddTime() {
    this.mainForm.multipleTimeArr.push([])
  }
  private handleDelTime(item: any) {
    var index = this.mainForm.multipleTimeArr.indexOf(item)
    if (index !== -1) {
      this.mainForm.multipleTimeArr.splice(index, 1)
    }
  }

四、零碎工具

1. [[‘11’, ‘22’], [‘33’, ‘55’]]
   变成
   [
   { “beginTime”: “11”, “endTime”: “22” },
   { “beginTime”: “33”, “endTime”: “55” }
   ]

• 可以使用 Array.prototype.map() 方法将二维数组转换为对象数组

let arr = [['11', '22'], ['33', '55']];

let result = arr.map(item => ({
  beginTime: item[0],
  endTime: item[1]
}));

console.log(result);

// 方法抽离
/**
 * 将时间段格式化所需要的接口入参
 * eg: [ { "beginTime": "", "endTime": "" } ]
 * @param timeRangeType: '1': 连续时间段 '2': 多时间段
 * @param timeData
 * 连续时间段: ['','']
 * 多时间段: [[],[]]
 */
export const timeFormatParams = (timeRangeType: string, timeData: string[] | string[][]) => {
  const timeObj: ActiveTimeType = { beginTime: '', endTime: '' }
  let singleArr: ActiveTimeType[] = []
  let multipleArr: ActiveTimeType[] = []
  if (timeRangeType === '1') {
    timeObj.beginTime = timeData[0]
    timeObj.endTime = timeData[1]
    singleArr.push(timeObj)
    return singleArr
  }
  if (timeRangeType === '2') {
    multipleArr = timeData.map(item => ({
      beginTime: item[0],
      endTime: item[1],
    }))
    return multipleArr
  }
}