Element UI 点击新增,添加选择框和时间选择器

开发那点事儿~

已于 2022-12-30 09:16:51 修改

阅读量2.6k

点赞数

分类专栏：前端开发框架文章标签：前端 vue.js 前端框架 elementui

于 2022-03-16 15:20:12 首次发布

本文链接：https://blog.youkuaiyun.com/m0_58293192/article/details/123527218

版权

前端开发同时被 2 个专栏收录

93 篇文章

订阅专栏

框架

54 篇文章

订阅专栏

本文介绍了如何使用Vue.js结合Element UI库创建动态表单，通过v-for指令遍历数组数据，展示多个包含周选择和时间范围选择的表单项。每个表单项可以通过添加和删除按钮进行增删。表单元素如多选下拉框和时间选择器的v-model值与数据对象动态绑定，允许用户自由切换选择项。示例代码展示了如何在data中定义form对象，以及添加和删除事件的处理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过 v-for="(item,index) in form.arrayData" :key="index" 循环

<el-form-item label="接诊时间" label-width="110px" required>
                      <div v-for="(item,index) in form.arrayData" :key="index" style="display: flex;align-items: center">
                        <el-form-item >
                          <el-select v-model="item.week" multiple placeholder="请选择周"  style="width:300px">
                            <el-option v-for="itemWeek in options" :key="itemWeek.value" :label="itemWeek.label" :value="itemWeek.value"></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item>
                          <el-time-picker is-range arrow-control v-model="item.time"
                            range-separator="~"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            placeholder="选择时间范围"
                            value-format="HH:mm">
                          </el-time-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>

在data的form对象中定义arrayData数组

form:{
    arrayData: [
         {
            week: ['周一','周二','周三'],
            time: ['09:00','18:00']
          }
    ],
}

然后添加事件:

//添加接诊时间
            add() {
              this.form.arrayData.push({
                week: '',
                time: ''
              })
            },
            deletes(item,index){
                if(this.form.arrayData.length<=1){ ///如果只有一个框则不可以删除
                  return false
                }
                this.form.arrayData.splice(index,1) //删除数组中对应的数据也就是将这个位置的框删除
            },

里面的选择框和时间选择器可以自由切换,只需要把对应的v-model值来进行添加就可以了