精华内容
下载资源
问答
  • Vue 动态生成表单item
    2021-05-12 18:10:40

    1.首先 判断list(几个item)的长度,判断根据特定标识动态生成 form对象 (动态绑定的数据)

    2.绑定在组件上

    3.在子组件里进行监听 computed,并且emit出去

    大概过程如下:

    searchData.map((item: any) => {
      let modelData = item.field + item.id
      if (item.uicomponent == '复选组') {
         form[modelData] = [];
       } else if (item.uicomponent == '范围') {
           form[modelData] = {first: "", second: ""}
          } else {
            form[modelData] = ""
          }
       })

    其中范围 里面绑定两个v-model 所以绑定的数据是一个对象

     <search-item :child="child"
                  :viewConfig="viewConfig"
                   v-model="form[child.field+child.id]">
    </search-item>

    子组件里面:

    <el-form-item class="btn-transfers"
                       :label="child.label">
        <el-input v-if="child.uicomponent == '文本'||child.uicomponent == '树形数据字典'"
                     v-model="searchValue"></el-input>
        <el-select filterable
                      @click="selectOptions(child.id)"
                      v-else-if="child.uicomponent == '列表'"
                      v-model="searchValue"
                      :options="options"
                      placeholder="请输入内容">
        </el-select>
        <el-cascader
            v-else-if="child.uicomponent == '级联'"
            v-model="searchValue"
            placeholder="请输入内容级联"></el-cascader>
    </el-form-item>
    props: ['propsTable', 'child', 'form', "modelValue","viewConfig"],
    let searchValue = computed({
          get() {
            return props.modelValue
          },
          set(value) {
            console.log(value)
            context.emit("update:modelValue", value)
          }
        });

    如此如此!

    更多相关内容
  • 主要介绍了使用Vue动态生成form表单的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • vue动态生成表单

    2020-12-28 10:55:59
    利用component is 动态组件,根据不同的组件类型标识,渲染展示不同的组件 在利用组件的数据通信去收集各个子组件的数据 实现demo 三个表单组件,用了element-ui, 此处用了自定义组件的v-model来收集子组件的数据 /...

    转载(https://www.jianshu.com/p/5bb791ba303d)
    思路

    先写好各个可能会出现的表单或者自定义的组件,引入。

    此时后端可能会给到一个对象型数组,每个对象有要渲染组件的一个类型标识

    利用component is 动态组件,根据不同的组件类型标识,渲染展示不同的组件

    在利用组件的数据通信去收集各个子组件的数据

    实现demo

    三个表单组件,用了element-ui,

    此处用了自定义组件的v-model来收集子组件的数据

    //InputComponent.vue  要渲染的子组件
    <template>
      <el-input :value="username" @input="inputHandler"></el-input>
    </template>
    
    <script>
      export default {
        name: 'InputComponent',
        data() {
          return {
    
          }
        },
        model: {
          prop: 'username',
          event: 'input'
        },
        props: {
          username: String
        },
        methods: {
          inputHandler(ev) {
            console.log(ev)
            this.$emit('input', ev)
          }
        }
      }
    </script>
    
    <style scoped>
    
    </style>
    
    //SwitchComponent.vue  要渲染的子组件
    <template>
      <el-switch
        :value="checked"
        active-color="#13ce66"
        inactive-color="#ff4949"
        @change="changeHandler"
      >
      </el-switch>
    </template>
    
    <script>
      export default {
        name: 'SwitchComponent',
        data() {
          return {
    
          }
        },
        model: {
          prop: 'checked',
          event: 'change'
        },
        props: {
          checked: {
            default: true
          }
        },
        methods: {
          changeHandler(ev) {
            this.$emit('change', ev)
          }
        }
      }
    </script>
    
    <style scoped>
    
    </style>
    
    
    //SelectComponent.vue  要渲染的子组件
    <template>
      <el-select :value="role" placeholder="请选择" @change="changeHandler">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.label">
        </el-option>
      </el-select>
    </template>
    
    <script>
      export default {
        name: 'SelectComponent',
        data () {
          return {
            options: [
              {
                value: '1',
                label: '李世民'
              },
              {
                value: '2',
                label: '嬴政'
              },
              {
                value: '3',
                label: '刘邦'
              },
              {
                value: '4',
                label: '项羽'
              },
              {
                value: '5',
                label: '范蠡'
              }
            ],
            value: ''
          }
        },
        model: {
          prop: 'role',
          event: 'change'
        },
        props: {
          role: {
            default: ''
          }
        },
        methods: {
          changeHandler(ev) {
            this.$emit('change', ev)
          }
        }
      }
    </script>
    
    <style scoped>
    
    </style>
    
    
    

    主组件(父组件)

    此处用了自定义组件的v-model来收集子组件的数据

    //Main.vue  父组件
    <template>
      <div>
          <el-form :model="formData">
            <el-form-item v-for="(item, index) in formItemList" :key="index" :label="item.label">
              <component
                :is="item.type"
                v-model="formData[item.key]"
              >
              </component>
            </el-form-item>
          </el-form>
      </div>
    </template>
    
    <script>
    //引入三个表单组件
      import InputComponent from './subComponents/InputComponent'
      import SelectComponent from './subComponents/SelectComponent'
      import SwitchComponent from './subComponents/SwitchComponent'
    
      export default {
        name: 'Main',
        data() {
          return {
            //数据的type值要与组件的名字对应  
            formItemList: [
              { type: 'switch-component', require: true, label: '开关', key: 'isOpen' },
              { type: 'input-component', require: true, label: '姓名', key: 'name' },
              { type: 'select-component', require: true, label: '角色', key: 'role' },
            ],
            formData: {
    
            }
          }
        },
        components: {
          InputComponent,
          SwitchComponent,
          SelectComponent,
        },
        methods: {
    
        }
      }
    </script>
    
    <style scoped lang="less">
      
    </style>
    
    
    展开全文
  • 主要介绍了Vue+Element实现动态生成表单并添加验证功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue动态生成表单元素

    千次阅读 2018-11-15 14:44:57
    单机生成表单生成表单 根据选择方式展示不同的表单元素 如果从编辑页进入该页面有数据的话,进行数据回填 样式同第三点相似,这里不再说明 思路: 请输入标题,请选择类型 为父组件;请选择方式 为子组件...

    前几天接了一个需求,需要动态生成一个表单数据,然后提交,提交完数据后。通过编辑按钮进入时,需要进行数据回填。

    一、页面展示:


    I. 没生成表单前的状态

    Vue-UEedit
    在这里插入图片描述
    UEedit
    在这里插入图片描述

    II. 单机生成表单生成表单
    在这里插入图片描述


    III. 根据选择方式展示不同的表单元素

    在这里插入图片描述


    IV. 如果从编辑页进入该页面有数据的话,进行数据回填

    样式同第三点相似,这里不再说明


    二、思路:

    请输入标题请选择类型 为父组件;请选择方式 为子组件;根据请选择方式出来的内容为孙子组件, 单选和下拉下面的生成参数是从孙组件


    三、难点:

    动态生成数据、数据多层传递(四层数据向下传递+四层数据向上传递)、数据格式转换、数据清空、
    数据关联、数据解耦、空白表单数据添加、 含原始表单数据添加、表单数据删除、非响应式数据处理、
    合并表单数据(判空+去重+重新排序)、深层数据传递监听


    四、结构上分析:

    (1)数据类型: 两层数据,三层数据,四层数据

    二层数据:
    新增
    层级1 --> 层级2–>层级1(整合数据)–>提交
    编辑
    回填 层级1 --> 层级2
    修改+新增 层级1 --> 层级2–>层级1 --> 提交

    三层数据:
    新增
    层级1 --> 层级2–>层级3–>层级2–>层级1(整合数据)–>提交
    编辑
    回填 层级1 --> 层级2–>层级3
    修改+新增 层级1 --> 层级2–>层级3–>层级2–>层级1(整合数据)–>提交

    四层数据:
    新增
    层级1 --> 层级2–>层级3–>层级4–>层级3层级2–>层级1(整合数据)–>提交
    编辑
    回填 层级1 --> 层级2–>层级3–>层级4
    修改+新增 层级1 --> 层级2–>层级3–>层级4–>层级3–>层级2–>层级1(整合数据)–>提交

    (2)生成类型:

    普通文本输入框、数字输入框、下拉框、

    关联值类型1:文本输入框+文本输入框、

    关联值类型2:文本输入框+单选框

    (3)关键值传递: 新增/编辑来回数据格式化转换:

    例如:

    提交时候分享参数:

    // 格式化URL动态添加数据格式
        formatURL(obj) {
          let url = "";
          const tempArr = [];
          const arr = Object.keys(obj);
          let leng = 0;
          arr.map(item => {
            if (item.slice(-1) * 1 > leng) {
              leng = item.slice(-1) * 1;
            }
          });
          for (let i = 1; i <= leng; i += 1) {
            const obj1key = arr.filter(item => item.slice(-1) * 1 === i);
            const obj1 = {};
            obj1key.map(item => {
              obj1[item] = obj[item];
            });
            tempArr.push(obj1);
          }
          tempArr.forEach(v => {
            Object.keys(v).map(key => {
              url += `${key}=${v[key]}&`;
            });
          });
          url = url.substring(0, url.length - 1);
          return `${this.data.link}?${url}`;
        }
    

    回填时解析分享参数:

    
      // 解析返回的分享参数
        formatDEcodeURL(URL) {
          const urlsrc = URL;
          const arr1 = [];
          const arr2 = [];
          const obj = {};
          urlsrc.split("&").map(v => {
            if (v.substring(0, 4) === "link") {
              arr1.push(v);
            }
            if (v.substring(0, 4) === "type") {
              arr2.push(v);
            }
          });
          arr1.forEach(v => {
            arr2.forEach(k => {
              if (v.charAt(4) === k.charAt(4)) {
                obj[`link${v.charAt(4)}`] = v.substring(6);
                obj[`type${k.charAt(4)}`] =
                  k.substring(6) === "1" ? "必填" : "非必填";
              } else {
                obj[`link${v.charAt(4)}`] = v.substring(6);
                obj[`type${k.charAt(4)}`] =
                  k.substring(6) === "1" ? "必填" : "非必填";
              }
            });
          });
          this.todoObj = obj;
          const max = Math.max(arr1.length, arr2.length);
          for (let i = 0; i < max; i += 1) {
            this.addShareLink();
          }
        },
    

    (4)监听第二三层数据变化,实现数据实时改变:

    例如:

      watch: {
        // 新增页面 监测父组件传入值变化
        secdown: {
          handler(val) {
            this.changeChoose(val);
          },
          deep: true,
          immediate: true
        },
        // 编辑页面 监测子组件变化,来刷新子组件其余值
        chooseTypes: {
          handler(val) {
            this.changeTypes(val);
          },
          deep: true,
          immediate: true
        }
      },
    

    五、代码分析:

    动态生成数据父组件讲解

    HTML

               <div
                  v-for="item in createFormArray"
                  :key="item.id">
                  <el-row
                    :gutter="24"
                    style="margin-top:10px;">
                    <el-col :span="3">
                      <div class="item-title">输入项{{ item.id }}:</div>
                    </el-col>
                    <el-col :span="3">
                      <el-input
                        v-model="createFormObj[item.value]"
                        placeholder="请输入标题"/>
                    </el-col>
                    <el-col :span="3">
                      <el-select
                        v-model="createFormObj[item.kind]"
                        placeholder="请选择类型">
                        <el-option
                          v-for="(item,index) in choose"
                          :key="index"
                          :label="item.label"
                          :value="item.value"/>
                      </el-select>
                    </el-col>
                    
                    <!-- 嵌入的第二层,请选择方式组件-->
                    
                    <DynamicData
                      :dynamical = "item.id"
                      :secdown = "item.indexDA"
                      @receive= "receive"/>
                  </el-row>
                </div>
    

    JS

    import DynamicData from "./dynamic_data"; //引入选择方式组件
    export default {
    components: {
        VueEditor,
        DynamicData
      },
    data() {
        return {
              createIndex:1,      //生成表单的索引
              countPage: 0,       //输入需要生成表单的个数
              createFormObj: {},     //存放每一个生成表单对象
              createFormArray: [],   //生成表单所有生成对象的数组
              choose: [         //请选择类型选择器里面的选择值
    		      {
    		          value: 1,
    		          label: "必填"
    		        },
    		        {
    		          value: 2,
    		          label: "非必填"
    		        }
    			],
              
              
        }
        },
        createForm() {
          for (; this.createIndex <= this.countPage; this.createIndex += 1) {
          
           //造数据,给每一项添加上 id,value,kind, type方便我们后面绑定数据使用(绑定的数据我们给后面加上索引区分)
           
            this.createFormArray.push({    
              id: this.createIndex,
              value: `link${this.createIndex}`,
              kind: `kind${this.createIndex}`,
              type: `type${this.createIndex}`
            });
          }
        }
    }
    
    

    DynamicData儿子组件讲解

    HTML层

    <template>
      <div class="data-manage-container">
        <el-col :span="3">
          <el-select
            v-model="chooseTypes"
            placeholder="请选择方式"
            @change="storeType">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <div>
          <!-- 传入 项数 和 选择的方式 -->
          <InputItem
            :child = "secdown"
            :showitem = "dynamical"        //从儿子组件将“选择的方式” 传给孙子组件
            :showindex="+chooseTypes" //从儿子组件将“项数” 传给孙子组件
            @lastchild="getChild"/>         //为了获取孙子组件数据,绑定函数传递过去
        </div>
      </div>
    </template>
    

    JS层

    <script>
    import InputItem from "./show_input_item";  //引入孙子组件
    
    export default {
      name: "DynamicData",
      components: {
        InputItem
      },
      props: {
        dynamical: {
          type: Number,
          default: 0
        },
        types: {
          type: Function,
          default() {}
        },
        secdown: {
          type: Object,
          default: () => ({})
        }
      },
      data() {
        return {
          chooseTypes: "", 
          options: [     //选择的类型
            {
              value: 1,
              label: "文字输入"
            },
            {
              value: 2,
              label: "电话号码"
            },
            {
              value: 3,
              label: "文件上传"
            },
            {
              value: 4,
              label: "下拉框选择"
            },
            {
              value: 5,
              label: "单选框"
            },
            {
              value: 6,
              label: "数字输入"
            },
            {
              value: 7,
              label: "Hidden"
            }
          ],
          childrenMess: []
        };
      },
      watch: {
        secdown: {
          handler(val) {
            this.changeChoose(val);
          },
          deep: true,
          immediate: true
        }
      },
      methods: {
        getChild(val) {    // 接受孙子组件传递过来的数据,并将数据传给父组件
          this.$emit("receive", { ...this.childrenMess, ...val });
        },
        storeType(val) {     // 每天选择时,接受孙子组件传递过来的数据,并将数据传给父组件
          this.childrenMess = { id: this.dynamical, value: val };
          this.$emit("receive", { ...this.childrenMess });
        },
        changeChoose(val) {
          this.chooseTypes = val.type;
        }
      }
    };
    </script>
    

    InputItem孙子组件讲解

    HTM层:

    <template>
      <div class="data-manage-container">
        <div v-show="showindex === 1">
          <el-col :span="3">
            <el-input
              v-model="generated_data.input_title"
              placeholder="请输入默认值"
              @change="getTextOne(showindex,$event)"/>
          </el-col>
          <el-col :span="3">
            最大长度:<el-input-number
              v-model="generated_data.numLength"
              :min="1"
              size="small"
              label="描述文字"
              @change="getNumberOne(showindex,$event)"/>
          </el-col>
        </div>
    
        <div v-show="showindex === 4 || showindex === 5">
          <div style="visibility:hidden;">
            <el-select
              v-model="generated_data.formvalue"
              placeholder="请输入默认值">
              <el-option
                v-for="item in selectValue"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </div>
          <div class="reduceparams">
            <el-row
              :gutter="10"
              style="padding-left:200px;">
              <el-col :span="5">
                <div
                  class="item-title"
                  @click = "formAddParam"> <i class="el-icon-circle-plus"/></div>
              </el-col>
            </el-row>
            <el-row
              v-for="(todo,index) in FormTodoParams"
              :key="todo.id">
              <el-row
                :gutter="20"
                style="padding-left:200px;padding-top:10px;">
                <el-col :span="1">
                  <div
                    class="item-title"
                    style="padding-top:10px;"
                    @click = "formRemoveParam(index)"> <i class="el-icon-remove"/></div>
                </el-col>
                <el-col
                  :span="1"
                  style="margin-top:10px;">
                  参数:
                </el-col>
                <el-col
                  :span="3"
                  style="margin-left: -38px;">
                  <el-input
                    v-model.trim="formObj[todo.value]"
                    placeholder="输入内容"
                    size="mini"
                    clearable
                    @change="getParamsFour(showindex,formObj)"/>
                </el-col>
                <el-col
                  :span="3"
                  style="margin-left: 10px;
                  margin-top:10px;">
                  <el-radio-group
                    v-model="generated_data.defaltRadio"
                    size="small"
                    @change="getSelectFour(showindex,$event)">
                    <el-radio
                      :label="formObj[todo.value]">选择为默认值</el-radio>
                  </el-radio-group>
                </el-col>
              </el-row>
            </el-row>
          </div>
        </div>
    
        <div v-show="showindex === 6">
          <el-col :span="3">
            <el-input
              v-model="generated_data.selectData"
              placeholder="请输入默认值"
              @change="getTextSix(showindex,$event)"/>
          </el-col>
          <el-col :span="3">
            最小值:<el-input-number
              v-model="generated_data.selectData_min"
              :min="0"
              size="small"
              label="最小值"
              @change="getMinSix(showindex,$event)"/>
          </el-col>
          <el-col :span="3">
            最大值:<el-input-number
              v-model="generated_data.selectData_max"
              :min="0"
              size="small"
              label="最大值"
              @change="getMaxSix(showindex,$event)"/>
          </el-col>
        </div>
        <div v-show="showindex === 7">
          <el-col :span="3">
            <el-input
              v-model="generated_data.selectnomalData"
              placeholder="请输入默认值"
              @change="getMaxSeven(showindex,$event)"/>
          </el-col>
        </div>
      </div>
    </template>
    

    HTML这里主要是根据不同的选择方式显示不同的表单内容,


    JS层

    <script>
    export default {
      name: "InputItem",
      components: {},
      props: {
        showindex: {
          type: Number,
          default: 0
        },
        showitem: {
          type: Number,
          default: 0
        },
        child: {
          type: Object,
          default: () => ({})
        }
      },
      data() {
        return {
          indexNormal: 0,
          formObj: {},
          selectValue: [
            {
              value: 1,
              label: "必填"
            },
            {
              value: 0,
              label: "非必填"
            }
          ],
          generaData: {
            inputTitle: "",
            numLength: 0,
            formvalue: "",
            selectData: 0,
            selectData_min: 0,
            selectData_max: 0,
            selectnomalData: "",
            defaltRadio: "",
            value: 0
          },
          formIndex: 0,
          FormTodoParams: [],
          typeFour: {
            choose: "",
            chooseObj: {}
          },
          typeFive: {
            choose: "",
            chooseObj: {}
          }
        };
      },
      watch: {
        // 新增页面 监测父组件传入值变化
        child: {
          handler(val) {
            this.watchChoose(val);
          },
          deep: true,
          immediate: true
        },
        // 编辑页面 监测子组件变化,来刷新子组件其余值
        generaData: {
          handler(val) {
            this.watchGeneraData(val);
          },
          deep: true,
          immediate: true
        }
      },
      mounted() {},
      methods: {
        // 编辑时有数据触发 数据回填
        watchChoose(val) {
          this.generaData.inputTitle = val.text;
          this.generaData.numLength = val.length;
          this.generaData.selectData = +val.num_default;
          this.generaData.selectData_min = +val.min;
          this.generaData.selectData_max = +val.max;
          this.generaData.formvalue = val.is_required;
          this.generaData.selectnomalData = val.novel;
          this.generaData.defaltRadio = val.default;
          this.generaData.id = val.id;
          this.generaData.type = this.showindex;
    
          if (val.type_value && val.type_value.length) {
            this.indexNormal = val.type_value.length;
            val.type_value.forEach((v, i) => {
              this.FormTodoParams.push({
                id: i + 1,
                value: `value${i + 1}`
              });
            });
            for (let i = 1; i <= val.type_value.length; i += 1) {
              this.formObj[`value${i}`] = val.type_value[i - 1];
            }
          }
        },
        watchGeneraData(val) {
          return val;
        },
        // 没有 子组件时刷新页面
        getInputBox(index) {
          if (index === 1 || index === 6 || index === 7) {
            this.watchGeneraData(this.generaData);
            this.integrationData(index);
          }
        },
        // 当选择"单选"或者"下拉"时生成表单元素
        formAddParam() {
          this.formIndex += 1;
          if (this.indexNormal > 0) {
            this.FormTodoParams.push({
              id: this.formIndex + this.indexNormal,
              value: `value${this.formIndex + this.indexNormal}`
            });
          } else {
            this.FormTodoParams.push({
              id: this.formIndex,
              value: `value${this.formIndex}`
            });
          }
        },
        formRemoveParam(index) {
          this.FormTodoParams.splice(index, 1);
        },
        // 整合并获取输入数据
        integrationData(index) {
          switch (index) {
            case 1:
              this.$emit("lastchild", {
                ...this.generaData,
                type: this.showindex,
                id: this.showitem
              });
              break;
            case 4:
              this.$emit("lastchild", {
                ...this.generaData,
                ...this.typeFour,
                type: this.showindex,
                id: this.showitem
              });
              break;
            case 5:
              this.$emit("lastchild", {
                ...this.generaData,
                ...this.typeFive,
                type: this.showindex,
                id: this.showitem
              });
              break;
            case 6:
              this.$emit("lastchild", {
                ...this.generaData,
                type: this.showindex,
                id: this.showitem
              });
              break;
            case 7:
              this.$emit("lastchild", {
                ...this.generaData,
                type: this.showindex,
                id: this.showitem
              });
              break;
            default:
              break;
          }
        },
        // 下拉框处理
        getSelectFour(index, val) {
          if (index === 4) {
            this.typeFour.choose = val;
            this.integrationData(index);
          } else {
            this.typeFive.choose = val;
            this.integrationData(index);
          }
        },
        // 下拉框处理
        getParamsFour(index, val) {
          if (index === 4) {
            this.typeFour.chooseObj = val;
            this.integrationData(index);
          } else {
            this.typeFive.chooseObj = val;
            this.integrationData(index);
          }
        }
      }
    };
    </script>
    
    

    这里代码并不是全部代码,只是抽出部分进行讲解,父组件有1300行左右的代码,主要是细节处理所有并没有贴出来。

    展开全文
  • vue动态生成表单元素基础篇

    千次阅读 2018-11-28 11:13:21
    这里讲解一个vue生成表单的简单实例: (图一) (图二) (图三) 如上图所示: 图一: 空的输入框的情况 图二: 点击 “+” 添加生成表单的情况 图三: 表单中可以输入值,并且可以点击“—”删除和点击“+”...

    在这里插入图片描述

    这里讲解一个vue生成表单的简单实例:

    在这里插入图片描述
    (图一)

    在这里插入图片描述
    (图二)

    在这里插入图片描述
    (图三)


    如上图所示:

    • 图一: 空的输入框的情况
    • 图二: 点击 “+” 添加生成表单的情况
    • 图三: 表单中可以输入值,并且可以点击“—”删除和点击“+”添加

    View层

              <el-row
                :gutter="20" >
                <el-col :span="3">
                  <div class="item-title"><span class="text-red">*</span> 分享链接:</div>
                </el-col>
                <el-col :span="5">
                  <div class="item-msg">
                    <el-input
                      v-model.trim="data.link"
                      placeholder="输入内容"
                      size="mini"
                      clearable/>
                  </div>
                </el-col>
              </el-row>
              
              <!-- 添加按钮 -->
              
              <el-row
                :gutter="20" >
                <el-col :span="3">
                  <div
                    class="item-title"
                    @click = "addShareLink"><i class="el-icon-circle-plus"/></div>
                </el-col>
              </el-row>
              
              <!-- 动态添加参数 -->
            
                <el-row
                  v-for="(todo,index) in shareParams"
                  :key="index">
                  <el-row :gutter="20">
                    <el-col :span="3">
                      <div
                        class="item-title"
                        @click = "removeParam(index)"><i class="el-icon-remove"/>
                      </div>
                    </el-col>
                    <el-col
                      :span="1"
                      style="margin-top:10px;margin-right:20px;">
                      参数:
                    </el-col>
                    <el-col
                      :span="3"
                      style="margin-left: -38px;">
                      <el-input
                        v-model.trim="todoObj[todo.value]"
                        placeholder="输入内容"
                        size="mini"
                        clearable/>
                    </el-col>
                    <el-col :span="3">
                      <el-select
                        v-model="todoObj[todo.type]"
                        placeholder="请选择类型">
                        <el-option
                          v-for="(item, index) in choose"
                          :key="index"
                          :label="item.label"
                          :value="item.value"/>
                      </el-select>
                    </el-col>
                  </el-row>
                </el-row>
    

    JS层

    export default {
    	methods: {
              // 添加分享链接参数
    	    addShareLink() {
    	      this.index += 1;
    	      this.shareParams.push({
    	        id: this.index,
    	        value: `link${this.index}`,
    	        type: `type${this.index}`
    	      });
    	    },
    	      // 删除分享参数
    	    removeParam(index) {
                 this.shareParams.splice(index, 1);
              },
    	}data() {
    	    return {
    	       index:0,
    	       shareParams: [],
    	       todoObj: {},
    	       data: {
    	        link: ""
    	      }
    	   }
    	 }
     }
    

    上面是对数据生成的处理,但是如果按照我中思路处理,最后提交是一个问题,所以在这里我要在写一个提交时数据格式化的函数:

        //提交的时候调用formatURL传入上面定义的 todoObj进行格式化
        
        formatURL(obj) {
          let url = "";
          const tempArr = [];
          const arr = Object.keys(obj);
          let leng = 0;
          arr.map(item => {
            if (item.slice(-1) * 1 > leng) {
              leng = item.slice(-1) * 1;
            }
          });
          for (let i = 1; i <= leng; i += 1) {
            const obj1key = arr.filter(item => item.slice(-1) * 1 === i);
            const obj1 = {};
            obj1key.map(item => {
              obj1[item] = obj[item];
            });
            tempArr.push(obj1);
          }
          tempArr.forEach(v => {
            Object.keys(v).map(key => {
              url += `${key}=${v[key]}&`;
            });
          });
          url = url.substring(0, url.length - 1);
          return `${this.data.link}?${url}`;
        },
    

    最后转换的格式为:

        234567878888?type1=热热&link1=必填&type2=热热&link2=非必填&type3=热女&link2=非必填
    

    上面是一个动态生层表单元素的基本形式,该代码可以直接移至到自己的项目中。

    展开全文
  • Vue 动态生成表单组件,可以根据数据配置表单,使用的UI库是。 有问题或BUG欢迎提 表单组件 Input 输入框 Button 按钮 Radio 单选框 Checkbox 多选框 Icon 图标 Switch 开关 Select 选择器 Slider 滑块 DatePicker ...
  • 动态生成v-model时不能直接使用string[‘name’]=value,无法编辑,这时需要使用this.$set
  • Vue动态生成表单组件vue-form-maker

    千次阅读 2018-12-25 10:30:52
    Vue动态生成表单组件 可以根据数据配置表单 使用的UI库是iView 整体组件布局方式借鉴了form-create的写法 在此表示感谢 在Vue里 一般要用到什么组件或数据 都得提前声明 所以要根据数据来生成表单 只能使用Vue的...
  • VUE动态生成word的实现

    2020-10-15 02:02:04
    主要介绍了VUE动态生成word的实现,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue动态生成form表单+校验

    千次阅读 2022-04-08 15:35:04
    Vue动态生成form表单+校验
  • 使用Vue生成动态表单

    2020-10-15 22:56:27
    主要介绍了Vue生成动态表单功能,这是小编第一次接这个需求,作为前端开发的我真的不知如何下手,今天小编通过一段代码给大家分享vue生成动态表单效果,需要的朋友可以参考下
  • 主要介绍了vue构建动态表单的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue生成动态表单

    千次阅读 2020-02-18 11:37:36
    需求背景 开需求会了,产品说这次需求的表单比较多,目前有18个,后期的表单可能会有增加、修改。我作为这次的前端开发,...后来重新评审了需求,系统部分由后端自行开发,我要处理的部分是动态生成表单,展现提...
  • vue动态生成表单绑定数据+添加校验规则一、需求场景以及注意事项一、需求场景一、注意事项二、代码结构一、template中二、data中三、methods中的按钮事件,也就是触发渲染之前的事件三、ant-design中的校验规则一、a...
  • 主要介绍了Vue+Element动态表单动态表格,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 一个基于vue.js和element-ui可以动态生成表单项form表单动态form表单是基于element-ui里的el-form表单基础上进行修改而来,它实现了新增表单项、删除表单项、表单验证和重置表单表单提交等form表单所拥有的基本...
  • 主要介绍了vue+element创建动态的form表单动态生成表格的行和列 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vueelementui动态表单

    2019-08-12 02:38:21
    vue-element-ui动态表单
  • vue动态生成表单,input输入框无法输入前言开始需要注意的地方 前言 开发过程中,遇到一个页面是纯表单配置页面,表单项有四五十个,于是只能想办法动态生成。 开始 1、后台返回数据格式为: ``` formData: [{ ...
  • 最近遇到一个问题,在一个页面需要动态渲染页面内的表单,其中包括 checkbox 表单类型,并且使用 Element 组件 UI 时,此时 v-model 绑定的数据也是动态生成的 例如: 定义的 data 的 form 里面是空对象,需要动态...
  • 介绍 form-create 是一个可以通过 JSON 生成... 通过 JSON 生成表单 通过 Maker 生成表单 强大的API,可快速操作表单 双向数据绑定 事件扩展 局部更新 数据验证 栅格布局 内置组件17种常用表单组件 对比 1.x
  • vue动态生成表单组件vue-generate-form

    千次阅读 2018-12-25 13:04:50
    Vue动态生成表单组件 可以根据数据配置表单 使用的UI库是iView 在Vue里 一般要用到什么组件或数据 都得提前声明所以要根据数据来生成表单 只能使用Vue的render函数要做这一个组件 其实并不难 看一下Vue官方示例 再找...
  • vue实现动态生成表格

    千次阅读 2022-02-24 10:15:39
    选择会计科目的时候,会查出来对应的动态表格项,在切换进行选择不同的会计科目时,动态对应展示对应的动态表格项,且该动态表格实现下拉框选择不同的数据。 eg1:选择第一行会计科目,接口查出来有两个动态表格项 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,151
精华内容 8,060
关键字:

vue动态生成表单

友情链接: plackmegt.rar