el-form-item 实现时间选择器添加多个

原创已于 2024-03-09 14:22:58 修改 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

于 2023-03-07 01:07:47 首次发布

本文展示了如何在Vue.js项目中，基于ElementUI库实现el-date-picker时间范围选择器的动态添加和删除功能。代码示例详细说明了如何初始化数据，设置必填验证规则，以及监听数据变化来更新表单内容。同时，提供了添加和删除操作的方法，确保至少保留一个时间范围选择器。

1.实现效果

2.代码逻辑

此段代码是建立在Elemet ui 中的el-date-picker时间控件上实现的


<template>
  <div class="back">
    <el-form ref="form" :rules="rules" :model="rules">
      <el-form-item label="请选择时间范围" :required="true" :rules="rules" class="form-y" prop="subscribe_time">
        <div v-for="(item, index) in subscribe_time" :key="index" style="display: flex; align-items: center ;margin-top: 10px;">
          <el-form-item>
            <el-date-picker v-model="item.time" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
          </el-form-item>
          <i class="el-icon-remove-outline" style="color: red; font-size: 20px; margin: 0 5px" @click="deletes(item, index)"></i>
        </div>
        <span style="color: #3d7fff; cursor: pointer" @click="add" @change="$forceUpdate()">+ 添加预约时间</span>
      </el-form-item>
    </el-form>
  </div>
</template>

由于el-date-picker需要el-form进行包裹所以需要进行ref的绑定

在form中设置一个初始的subscribe_time空数组

这边根据需求来给他进行rules必填判断

还需要给时间选择器一个默认值


data () {
    return {
        // 初始的form
        form: {
            subscribe_time: []
        },
        // 必填判断
        rules: {
            subscribe_time: [
                { required: true, message: '请选择报名时间', trigger: 'change' }
            ]
        },
        // 时间选择默认值
        subscribe_time: [{ time: '' }]
    }
},

初始值设置完成就开始进行逻辑部分

请在methods中添加以下事件

在第一段代码块中的Span中设置的一个点击事件来进行新添加一个el-date-picker组件

在Span行内Css中的cursor属性是改变指针指向状态的

pointer便是把指针换为小手


// 添加预约时间
add () {
    this.subscribe_time.push({
        time: ''
    })
},

以下代码块是删除的逻辑

判断是否是最后一个el-date-picker组件

如果是就给他提示至少保留一个时间段

这边传入的两个形参分别为

_item删除的对象

index被删除的下标是多少

然后用数组方法splice来进行删除操作


deletes (_item, index) {
    if (this.subscribe_time.length <= 1) {
        this.$message({
            message: '至少保留一个时间段',
            type: 'warning'
        })
        /// 如果只有一个框则不可以删除
        return false
    }
    this.subscribe_time.splice(index, 1) // 删除数组中对应的数据也就是将这个位置的框删除
    this.form.subscribe_time.splice(index, 1) // 删除数组中对应的数据也就是将这个位置的框删除
}

以下代码块需要写在watch监听方法中

在监听到subscribe_time数据改变时就会触发里面的代码逻辑


// 监听选择时间
subscribe_time: {
    handler (newVal) {
        // 创建一个新的数组来装循环出来的数组
        let contentItem = []
        // 把默认的from数组变为空来进行下面的操作
        this.form.subscribe_time = []
        // 开始循环时间数组
        newVal.forEach((v) => {
            if (v.time.length > 0) {
                // 把time中的值循环出来
                contentItem = v.time
                // push进新的数组中
                this.form.subscribe_time.push(contentItem)
            }
        })
    },
    immediate: true,
    deep: true
}

以上代码直接复制即可使用

如果需求有出入自行修改一下即可

完整代码块在以下


<template>
  <div class="back">
    <el-form ref="form" :rules="rules" :model="rules">
      <el-form-item label="请选择时间范围" :required="true" :rules="rules" class="form-y" prop="subscribe_time">
        <div v-for="(item, index) in subscribe_time" :key="index" style="display: flex; align-items: center ;margin-top: 10px;">
          <el-form-item>
            <el-date-picker v-model="item.time" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
          </el-form-item>
          <i class="el-icon-remove-outline" style="color: red; font-size: 20px; margin: 0 5px" @click="deletes(item, index)"></i>
        </div>
        <span style="color: #3d7fff; cursor: pointer" @click="add" @change="$forceUpdate()">+ 添加预约时间</span>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        subscribe_time: []
      },
      rules: {
        subscribe_time: [
          { required: true, message: '请选择报名时间', trigger: 'change' }
        ]
      },
      // 时间选择默认值
      subscribe_time: [{ time: '' }]
    }
  },
  methods: {
    // 添加预约时间
    add () {
      this.subscribe_time.push({
        time: ''
      })
    },
    // 删除预约时间
    deletes (_item, index) {
      if (this.subscribe_time.length <= 1) {
        this.$message({
          message: '至少保留一个预约时间段',
          type: 'warning'
        })
        /// 如果只有一个框则不可以删除
        return false
      }
      this.subscribe_time.splice(index, 1) // 删除数组中对应的数据也就是将这个位置的框删除
      this.form.subscribe_time.splice(index, 1) // 删除数组中对应的数据也就是将这个位置的框删除
    }
  },
  watch: {
    subscribe_time: {
            handler (newVal) {
                // 创建一个新的数组来装循环出来的数组
                let contentItem = []
                // 把默认的from数组变为空来进行下面的操作
                this.form.subscribe_time = []
                // 开始循环时间数组
                newVal.forEach((v) => {
                    if (v.time.length > 0) {
                        // 把time中的值循环出来
                        contentItem = v.time
                        // push进新的数组中
                        this.form.subscribe_time.push(contentItem)
                    }
                })
            },
            immediate: true,
            deep: true
        }
    }
}
</script>
<style lang="less" scoped>
/deep/ .el-form-item__label{
  float: none !important;
}
</style>