动态生成表单(添加select选择器类型和时间类型)

最新推荐文章于 2023-07-06 18:01:46 发布
最新推荐文章于 2023-07-06 18:01:46 发布
阅读量259 收藏
点赞数
分类专栏： 前端开发 文章标签： javascript vue.js es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44166251/article/details/118408402
版权 
<template>
  <div class="dynamic" style="margin-top: 50px">
    <div class="left">
      <el-form
        :model="dynamicForm"
        label-width="200px"
        :rules="dynamicFormRules"
        ref="dynamicForm"
      >
        <el-form-item label="表单类型">
          <el-radio-group v-model="dynamicForm.formType" @change="radioChange">
            <el-radio v-for="(itemRadio,indexRadio) in radioArray" :key="indexRadio" :label="itemRadio.value">{{itemRadio.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="key(v-model绑定的值)" prop="key">
          <el-input
            v-model.trim="dynamicForm.key"
            @blur="keyInputBlur($event)"
          />
        </el-form-item>
        <el-form-item label="label(el-form-item的label)" prop="name">
          <el-input
            v-model.trim="dynamicForm.name"
            @blur="keyInputBlur($event)"
          />
        </el-form-item>
        <!-- 单选按钮 -->
        <div v-if="dynamicForm.formType == 2">
          <div v-for="(item, index) in dynamicForm.radioArr" :key="index">
            <el-form-item
              :prop="`radioArr.${index}.keyRadio`"
              :rules="[
                {
                  required: true,
                  message: '请输入单选按钮的key',
                  trigger: 'blur',
                },
                {
                  pattern: /^[A-Za-z-]+$/,
                  message: '只允许输入英文字母',
                  trigger: ['blur', 'change'],
                },
              ]"
            >
              <span slot="label">{{ "单选选项key" + (index + 1) }}</span>
              <el-input
                v-model.trim="dynamicForm.radioArr[index].keyRadio"
                @blur="radioKeyBlur($event, 'key')"
              >
                <el-button
                  v-if="index == 0"
                  slot="append"
                  icon="el-icon-plus"
                  @click.native="addRadioItem('radio')"
                ></el-button>
                <el-button
                  v-if="index != 0 && index != 1"
                  slot="append"
                  icon="el-icon-minus"
                  @click.native="removeRadioItem(index, 'radio')"
                ></el-button>
              </el-input>
            </el-form-item>
            <el-form-item
              :prop="`radioArr.${index}.value`"
              :rules="[
                { required: true, message: '请输入value', trigger: 'blur' },
                {
                  pattern: /^[\u4e00-\u9fa5]+(·[\u4e00-\u9fa5]+)*$/,
                  message: '只允许输入汉字',
                  trigger: ['blur', 'change'],
                },
              ]"
            >
              <span slot="label">{{ "单选选项value" + (index + 1) }}</span>
              <el-input
                v-model.trim="dynamicForm.radioArr[index].value"
                @blur="radioKeyBlur($event, 'value')"
              />
            </el-form-item>
          </div>
        </div>
        <!-- select选择器 -->
        <div v-if="dynamicForm.formType == 6">
          <div
            v-for="(itemSelect, indexSelect) in dynamicForm.selectArr"
            :key="indexSelect"
          >
            <el-form-item
              :prop="`selectArr.${indexSelect}.keySelect`"
              :rules="[
                {
                  required: true,
                  message: '请输入select选择器的key',
                  trigger: 'blur',
                },
                {
                  pattern: /^[A-Za-z-]+$/,
                  message: '只允许输入英文字母',
                  trigger: ['blur', 'change'],
                },
              ]"
            >
              <span slot="label">{{
                "select选择器key" + (indexSelect + 1)
              }}</span>
              <el-input
                v-model.trim="dynamicForm.selectArr[indexSelect].keySelect"
                @blur="selectKeyBlur($event, 'key')"
              >
                <el-button
                  v-if="indexSelect == 0"
                  slot="append"
                  icon="el-icon-plus"
                  @click.native="addRadioItem('select')"
                ></el-button>
                <el-button
                  v-if="indexSelect != 0 && indexSelect != 1"
                  slot="append"
                  icon="el-icon-minus"
                  @click.native="removeRadioItem(indexSelect, 'select')"
                ></el-button>
              </el-input>
            </el-form-item>
            <el-form-item
              :prop="`selectArr.${indexSelect}.selectValue`"
              :rules="[
                { required: true, message: '请输入value', trigger: 'blur' },
                {
                  pattern: /^[\u4e00-\u9fa5]+(·[\u4e00-\u9fa5]+)*$/,
                  message: '只允许输入汉字',
                  trigger: ['blur', 'change'],
                },
              ]"
            >
              <span slot="label">{{
                "select选择器value" + (indexSelect + 1)
              }}</span>
              <el-input
                v-model.trim="dynamicForm.selectArr[indexSelect].selectValue"
                @blur="selectKeyBlur($event, 'value')"
              />
            </el-form-item>
          </div>
        </div>
        <!-- 复选框 -->
        <div v-if="dynamicForm.formType == 3">
          <div
            v-for="(checkItme, checkIndex) in dynamicForm.checkedArr"
            :key="checkIndex"
          >
            <el-form-item
              :prop="`checkedArr.${checkIndex}.label`"
              :rules="[
                { required: true, message: '请输入label', trigger: 'blur' },
                {
                  pattern: /^[\u4e00-\u9fa5]+(·[\u4e00-\u9fa5]+)*$/,
                  message: '只允许输入汉字',
                  trigger: ['blur', 'change'],
                },
              ]"
            >
              <span slot="label">{{ "复选框选项" + (checkIndex + 1) }}</span>
              <el-input
                v-model.trim="dynamicForm.checkedArr[checkIndex].label"
                @blur="checkBlur($event)"
              >
                <el-button
                  v-if="checkIndex == 0"
                  slot="append"
                  icon="el-icon-plus"
                  @click.native="addRadioItem('checked')"
                ></el-button>
                <el-button
                  v-if="checkIndex != 0 && checkIndex != 1"
                  slot="append"
                  icon="el-icon-minus"
                  @click.native="removeRadioItem(checkIndex, 'checked')"
                ></el-button>
              </el-input>
            </el-form-item>
          </div>
        </div>
        <el-form-item label="该字段是否必填" prop="required">
          <el-radio-group v-model="dynamicForm.required">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="confirmBtn">确认添加</el-button>
    </div>
    <div class="right" v-if="toItemArr.length > 0">
      <el-form
        :model="toForm"
        label-width="200px"
        ref="toForm"
        :rules="toFormRules"
      >
        <el-form-item
          v-for="(formItem, formIndex) in toItemArr"
          ref="itemUpload"
          :key="formIndex"
          :label="formItem.name"
          :prop="formItem.key"
          :rules="
            formItem.required == 1
              ? [
                  {
                    required: true,
                    message: `请${
                      formItem.formType == '2' || formItem.formType == '6' || formItem.formType == '7'
                        ? '选择'
                        : formItem.formType == '4'
                        ? '上传'
                        : formItem.formType == '3'
                        ? '至少选择一个'
                        : '输入'
                    }${formItem.formType == '4' ? '文件' : formItem.name}`,
                    trigger: 'blur',
                  },
                ]
              : []
          "
        >
          <el-input
            v-model="toForm[formItem.key]"
            v-if="formItem.formType == 1"
          />
          <el-radio-group
            v-model="toForm[formItem.key]"
            v-if="formItem.formType == 2"
            @change="noValid"
          >
            <el-radio
              v-for="(radioItem, radioIndex) in formItem.radioArr"
              :key="radioIndex"
              :label="radioItem.keyRadio"
              >{{ radioItem.value }}</el-radio
            >
          </el-radio-group>
          <el-checkbox-group
            v-model="toForm[formItem.key]"
            v-if="formItem.formType == 3"
            @change="noValid"
          >
            <el-checkbox
              v-for="(checkItem, checkIndex) in formItem.checkedArr"
              :key="checkIndex"
              :label="checkItem.label"
            ></el-checkbox>
          </el-checkbox-group>
          <el-upload
            v-if="formItem.formType == 4"
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :on-change="
              (file, fileList) => {
                uploadChange(file, fileList, formItem.key);
              }
            "
            v-model="toForm[formItem.key]"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <el-input
            type="textarea"
            v-model="toForm[formItem.key]"
            v-if="formItem.formType == 5"
          />
          <el-select
            v-model="toForm[formItem.key]"
            :placeholder="`请选择${formItem.name}`"
            v-if="formItem.formType == 6"
            @change="noValid"
            clearable
          >
            <el-option
              v-for="(selectItmes, slectIndexs) in formItem.selectArr"
              :key="slectIndexs"
              :label="selectItmes.selectValue"
              :value="selectItmes.keySelect"
            >
            </el-option>
          </el-select>
          <el-date-picker v-model="toForm[formItem.key]" type="date" placeholder="选择日期" v-if="formItem.formType == 7" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <el-button
        type="primary"
        @click="submitServe"
        v-if="JSON.stringify(toForm) != '{}'"
        >提交到服务器</el-button
      >
    </div>
  </div>
</template>  

<script>
export default {
  data() {
    return {
      //单选按钮的类型可以直接在此处添加
      radioArray:[{label:'正常的input框',value:1},{label:'单选按钮',value:2},{label:'多选check',value:3},{label:'文件类型',value:4},{label:'textarea类型',value:5},{label:'select选择器类型',value:6},{label:'时间格式类型',value:7}],
      repeat: false,
      //新生成的表单信息  里面的字段都是动态添加
      toForm: {},
      //新生成表单信息的校验规则  里面的校验也是动态添加
      toFormRules: {},
      toItemArr: [],
      dynamicForm: {
        formType: 1, //表单类型     1代表正常的input 2代表单选按钮 3代表check复选框 4代表文件类型 5代表textarea类型  6代表select选择器类型 7代表时间格式类型
        key: "", //表单中的每一项绑定的值（prop）
        name: "", //表单中每一项的label
        radioArr: [
          { keyRadio: "", value: "" },
          { keyRadio: "", value: "" },
        ],
        checkedArr: [{ label: "" }, { label: "" }],
        required: 1,
        selectArr: [
          { keySelect: "", selectValue: "" },
          { keySelect: "", selectValue: "" },
        ],
      },
      dynamicFormRules: {
        key: [
          { required: true, message: "请输入key", trigger: "blur" },
          {
            pattern: /^[A-Za-z-]+$/,
            message: "只允许输入英文字母",
            trigger: ["blur", "change"],
          },
        ],
        name: [
          { required: true, message: "请输入name", trigger: "blur" },
          {
            pattern: /^[\u4e00-\u9fa5]+(·[\u4e00-\u9fa5]+)*$/,
            message: "只允许输入汉字",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  methods: {
    noValid() {
      this.$refs["itemUpload"][0].clearValidate();
    },
    uploadChange(file, fileList, key) {
      //清除校验
      this.$refs["itemUpload"][0].clearValidate();
      this.toForm[key] = fileList;
      // console.log(this.toForm,fileList,this.toItemArr)
    },
    checkBlur(e) {
      let sameArr = this.dynamicForm.checkedArr.filter((item, index) => {
        return item.label == e.target.value;
      });
      // console.log(sameArr)
      if (sameArr.length > 1 && e.target.value != "") {
        this.$message.error("该字段已存在，请重新输入");
        e.target.value = "";
      }
    },
    //创建表单元素单选按钮时 ，不能够输入相同的key
    radioKeyBlur(e, type) {
      let sameArr = this.dynamicForm.radioArr.filter((item, index) => {
        if (type == "key") {
          return item.keyRadio == e.target.value;
        } else if (type == "value") {
          return item.value == e.target.value;
        }
      });
      // console.log(sameArr)
      if (sameArr.length > 1 && e.target.value != "") {
        this.$message.error("该字段已存在，请重新输入");
        e.target.value = "";
      }
    },
    //创建表单元素select选择器时 ，不能够输入相同的key
    selectKeyBlur(e, type) {
      let sameArr = this.dynamicForm.selectArr.filter((item, index) => {
        if (type == "key") {
          return item.keySelect == e.target.value;
        } else if (type == "value") {
          return item.selectValue == e.target.value;
        }
      });
      // console.log(sameArr)
      if (sameArr.length > 1 && e.target.value != "") {
        this.$message.error("该字段已存在，请重新输入");
        e.target.value = "";
      }
    },
    //切换单选按钮清空数据以及清除校验
    radioChange() {
      this.$refs.dynamicForm.resetFields();
    },
    keyInputBlur(e) {
      // console.log(e.target.value)
      let ev = e.target.value;
      this.toItemArr.forEach((item, index) => {
        if (ev == item.key || ev == item.name) {
          this.$message.error("该字段已存在，请重新输入");
          e.target.value = "";
          this.repeat = true; //防止直接点击‘确认添加’按钮
        }
        return;
      });
    },
    //上传文件超出规定大小回调函数
    handleExceed() {},
    //提交到服务器按钮
    submitServe() {
      this.$refs.toForm.validate((valid) => {
        if (valid) {
          this.toItemArr.forEach((item, index) => {
            Object.keys(this.toForm).forEach((objItme, objIndex) => {
              if (objItme == item.key) {
                item.value = this.toForm[objItme];
              }
            });
          });
          console.log(this.toItemArr);
        } else {
          return false;
        }
      });
    },
    //确认按钮
    confirmBtn() {
      this.$refs.dynamicForm.validate((valid) => {
        //通过校验
        if (valid) {
          //判断是否有重复定义的el-form-item
          if (!this.repeat) {
            if (this.dynamicForm.formType == 3) {
              // this.toForm[this.dynamicForm.key] = [];  注释掉的这部分有问题需要用$set的方式动态添加属性
              this.$set(this.toForm, this.dynamicForm.key, []);
            } else {
              this.$set(this.toForm, this.dynamicForm.key, "");
            }
            this.toItemArr.push(this.dynamicForm);
            console.log(this.toItemArr);
            this.dynamicForm = {
              formType: 1, //表单类型     1代表正常的input 2代表单选按钮 3代表check复选框 4代表文件类型 5代表textarea类型
              key: "", //表单中的每一项绑定的值（prop）
              name: "", //表单中每一项的label
              radioArr: [
                { keyRadio: "", value: "" },
                { keyRadio: "", value: "" },
              ],
              checkedArr: [{ label: "" }, { label: "" }],
              required: 1,
              selectArr: [
                { keySelect: "", selectValue: "" },
                { keySelect: "", selectValue: "" },
              ],
            };
          } else {
            this.repeat = false;
          }
        } else {
          return false;
        }
      });
    },
    //添加radio的一项方法
    addRadioItem(type) {
      if (type == "radio") {
        this.dynamicForm.radioArr.push({ radioArr: "", value: "" });
      } else if (type == "checked") {
        this.dynamicForm.checkedArr.push({ label: "" });
      } else if (type == "select") {
        this.dynamicForm.selectArr.push({ keySelect: "", selectValue: "" });
      }
    },
    //删除radio其中一项的方法
    removeRadioItem(index, type) {
      if (type == "radio") {
        this.dynamicForm.radioArr.splice(index, 1);
      } else if (type == "checked") {
        this.dynamicForm.checkedArr.splice(index, 1);
      } else if (type == "select") {
        this.dynamicForm.selectArr.splice(index, 1);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.left {
  // float: left;
  // width: 50%;
  flex: 1;
  width: 700px;
}
.right {
  // float: right;
  // // margin-left: 100px;
  // margin-top: 9px;
  // width: 50%;
  flex: 1;
  width: 700px;
}
.dynamic{
  display: flex;
}
</style>
瞧、
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中v-model动态生成的实例详解
08-29
主要介绍了vue中v-model动态生成的实例详解的相关资料,希望通过本文能帮助到大家，让大家理解掌握这部分内容，需要的朋友可以参考下
动态表单配置select
weixin_51040174的博客
07-13 491
1、通过el-form-item v-for=“(formName, index) in dynamicForm.formNames” 遍历多个动态表单， 数据项： 默认的下拉框属性值： 遍历的option是用计算属性 el-option v-for=“item in filterOptions[index]” 添加表单： 实现添加表单 实现删除表单： 随意的提交 全部代码：...
动态从数据库中读值，静态给select后，再改变select的属性
wthorse的专栏
07-23 1148
  tt="美国"  Response.Write(tt) %>   >      中国    美国    日本    //document.form1.select.options[2].selected=true  for(var i=0;i  {    if(document.form1.select1.options[i].value==document.form1.tempsele
bootstrap 表单中的select下拉列表数据动态加载和selected
gu_study的博客
12-10 9201
设计实现 采用的是ajax 和 js来实现 1.在页面加载中触发ajax动态数据获取事件 2.将获取到的数据动态的赋值到&lt;option&gt;标签中 需要注意的点： 1.ajax的数据refresh和清除 $('.selectpicker').selectpicker('val', ''); $('.selectpicker').selectpicker('refresh'...
动态添加select里的选项
qq_16690239的博客
11-14 457
var selDom = $(&amp;amp;quot;#id&amp;amp;quot;); $.ajax({ url: &amp;amp;quot;../aaaaa/aaaaaaa.ht&amp;amp;quot;, type: 'post', dataType: 'json', data: {&amp;amp;quot;role&amp;amp;quot;: &
PHP表单生成器，快速生成现代化的form表单
06-03
时间选择器和日期选择器则是为了方便用户输入时间或日期，避免手动输入可能产生的格式错误。这些组件通常会提供日历图标，用户可以通过日历弹窗进行选择，也可以直接输入。 颜色选择器允许用户通过颜色板或色码选择...
PHP Web表单生成器案例分析
10-15
4. **数据处理**：考虑到表单数据的保存形式，可能需要将数据以特定格式（如JSON或XML）存储，以便于解析和生成表单。 案例实现过程中，首先要**准备表单**： - 表单由表单域（`<form>`）和表单控件组成。表单域...
js日期时间选择器代码
06-24
JavaScript日期时间选择器是一种在网页上为用户交互提供方便的工具，它允许用户通过下拉菜单选择日期和时间，而不是手动输入。这种组件通常用于表单填写，预订系统或者任何需要用户输入特定日期和时间的场景。在...
vue-form-maker:Vue 表单生成器——动态生成表单组件
05-02
Vue 动态生成表单组件，可以根据数据配置表单，使用的UI库是。 有问题或BUG欢迎提 表单组件 Input 输入框 Button 按钮 Radio 单选框 Checkbox 多选框 Icon 图标 Switch 开关 Select 选择器 Slider 滑块 DatePicker ...
利用js给datalist或select动态添加option选项的方法
10-18
这个方法会构建一个字符串，表示一个新的 `option` 元素，然后将其添加到 `#cities` 选择器所选的元素（即 `datalist`）中。 在实际应用中，`cities` 数组通常是通过 AJAX 请求从服务器获取的，这允许动态更新下拉...
vue v-model动态生成详解
01-21
1.input 输入框 v-model 绑定的字段名需要根据后台返回的数据动态生成，此时就不可以用 v-model绑定，而是用传统的方法 value 动态绑定，并且用子组件绑定向父组件传递值和事件。 代码如下： //子组件 <template> <input v-if=type === 0 type=text :value=currentValue @change=handleInput> <textarea v-else :value=currentValue @change=handleInput></textarea> </template> <script
动态设置筛选选择条件（时间，日期，时间段，单选，多选，不限层级的树状结构选择）
03-20
动态配置筛选条件，仿照58，京东筛选框设计，动态配置筛选条件，Buidler模式设置数据源，状态模式设置具体筛选类型，工厂模式创建筛选对象，支持异步设置数据源，支持自行扩展筛选条件类型
form表单使用Select 选择器
最新发布
CMDN123456的博客
07-06 546
form表单使用Select 选择器
动态生成单选+多选+获得选择的答案
qq_44173499的博客
02-26 1699
动态生成单选+多选+获得选择的答案 代码： Markup <template> <div class='wrap'> <!-- 头部 --> <div class="header"> <mt-header title="驾驶员考试"> <router-link to="/examlogin" slot="left">
vue elementui 动态获取数据 遍历循环 生成el-radio-group
热门推荐
chenacxz的博客
11-29 2万+
单选 先看一下单选实际效果图 点击编辑图标显示 单选框实际上是比较简单的。由于很多数据是从数据库里取出来的。先看一下我存入的数据格式，为了方便操作，我是单选一张表，多选一张表，当然也可以放在一起，我是为了灵活多用，避免数据混淆，出现bug,说到底就是不做那么多判断，太麻烦了 <el-card class="boxs-card"> &lt...
Element el-form根据选择条件动态控制表单必填项
大左的博客
01-12 3470
Element el-form根据选择条件动态控制表单必填项
jQuery动态生成<select>下拉框
weixin_30361753的博客
06-04 1184
　　前一阵在项目里需要动态生成下拉框，找了一下用jQuery实现比较方便，这里整理一下。 下文所述方法只是本人在项目中遇到问题的解决方法，场景较为简单，也希望能帮助有需要的朋友 1、动态生成下拉框的两种方式 　　（1）将数据放在model中，JSP页面用EL表达式${}取出，该方式缺点是数据更改时必须刷新整个页面，本文不过多描述。 　　（2）就是本文要说的jQuery动态生成了，该方式适合...
根据select语句,动态生成下拉框方法提供参考
路飞船长的博客
06-13 858
思路:首先既然依靠select查询生成的,那肯定需要进行遍历,将遍历到的数据传到前端,然后进行解析遍历最后绑定到下拉框组件.1.首先遍历数据,遍历方式有很多种我这里的简单些 2.前端交互代码 3.绑定下拉框,对下拉框的内容进行遍历从而动态生成下拉框,这里的循环括号内是定义的类型名字,in后面是需要遍历的数组,通过label和value来获取到数据.........
【JQuery】实现select功能/动态下拉框：
SunPeng的博客
07-21 2343
【JQuery】实现select功能：，固定数据，后台数据，获取多个值（value和id）
前端动态配置生成表单，包含Radio单选框，Checkbox 多选框，Input输入框，select下拉菜单，Switch 开关，Slider 滑块，TimePicker 时间选择器，DatePicker 日期选择器，DateTimePicker 日期时间选择器，Upload 上传，ColorPicker 颜色选择器，并为其添加表单验证规则
06-10
首先，前端动态配置生成表单需要使用一个表单生成器库，比如 Formik，它可以帮助你轻松地创建和管理表单。在这个库的基础上，你可以添加各种表单元素，比如 Radio 单选框、Checkbox 多选框、Input 输入框、Select ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值