vue动态生成表单

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表单的实例代码
2020-08-27 15:20:57

主要介绍了使用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实现动态生成新表单并添加验证功能
2020-10-16 22:47:57

主要介绍了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>

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-form-maker:Vue 表单生成器——动态生成表单组件
2021-05-02 16:32:33

Vue 动态生成表单组件，可以根据数据配置表单，使用的UI库是。有问题或BUG欢迎提表单组件 Input 输入框 Button 按钮 Radio 单选框 Checkbox 多选框 Icon 图标 Switch 开关 Select 选择器 Slider 滑块 DatePicker ...

收起

JavaScript
vue动态生成表单输入框，并动态生成v-model（动态生成v-model遇到的坑）
千次阅读 2020-07-05 14:17:14

动态生成v-model时不能直接使用string[‘name’]=value，无法编辑，这时需要使用this.$set

收起
Vue动态生成表单组件vue-form-maker
千次阅读 2018-12-25 10:30:52

Vue动态生成表单组件可以根据数据配置表单使用的UI库是iView 整体组件布局方式借鉴了form-create的写法在此表示感谢在Vue里一般要用到什么组件或数据都得提前声明所以要根据数据来生成表单 只能使用Vue的...

收起

javascript form
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构建动态表单的方法示例
2020-10-17 23:45:29

主要介绍了vue构建动态表单的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

收起
用Vue生成动态表单
千次阅读 2020-02-18 11:37:36

需求背景开需求会了，产品说这次需求的表单比较多，目前有18个，后期的表单可能会有增加、修改。我作为这次的前端开发，...后来重新评审了需求，系统部分由后端自行开发，我要处理的部分是动态生成表单，展现提...

收起
vue动态生成新表单并且添加验证校验规则
千次阅读 2020-07-18 14:15:33

vue动态生成表单绑定数据+添加校验规则一、需求场景以及注意事项一、需求场景一、注意事项二、代码结构一、template中二、data中三、methods中的按钮事件，也就是触发渲染之前的事件三、ant-design中的校验规则一、a...

收起

javascript
详解Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）
2020-10-17 03:18:07

主要介绍了Vue+Element动态表单动态表格，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

收起
vue-form-component:一个可以动态生成表单项的form表单组件
2021-05-11 12:17:07

一个基于vue.js和element-ui可以动态生成表单项form表单此动态form表单是基于element-ui里的el-form表单基础上进行修改而来，它实现了新增表单项、删除表单项、表单验证和重置表单、表单提交等form表单所拥有的基本...

收起
vue+element创建动态的form表单及动态生成表格的行和列
2020-10-16 23:22:29

主要介绍了vue+element创建动态的form表单及动态生成表格的行和列 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

收起
vueelementui动态表单
2019-08-12 02:38:21

vue-element-ui动态表单

收起
vue动态生成表单并加验证规则，input输入框无法输入
千次阅读 2019-08-06 14:47:32

vue动态生成表单，input输入框无法输入前言开始需要注意的地方前言开发过程中，遇到一个页面是纯表单配置页面，表单项有四五十个，于是只能想办法动态生成。开始 1、后台返回数据格式为： ``` formData: [{ ...

收起
Vue动态生成el-checkbox点击无法赋值的解决方法
2020-12-03 15:06:54

最近遇到一个问题，在一个页面需要动态渲染页面内的表单，其中包括 checkbox 表单类型，并且使用 Element 组件 UI 时，此时 v-model 绑定的数据也是动态生成的例如：定义的 data 的 form 里面是空对象，需要动态...

收起
vue自定义表单生成器form-create使用详解
2020-12-08 21:25:05

介绍 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：选择第一行会计科目，接口查出来有两个动态表格项 ...

收起

前端 javascript

使用Vue动态生成form表单的实例代码

vue动态生成表单

Vue+Element实现动态生成新表单并添加验证功能

vue动态生成表单元素

一、页面展示：

Vue-UEedit

UEedit

二、思路：

三、难点：

四、结构上分析：

（1）数据类型：两层数据，三层数据，四层数据

（2）生成类型：

（3）关键值传递：新增/编辑来回数据格式化转换：

（4）监听第二三层数据变化，实现数据实时改变：

五、代码分析：

动态生成数据父组件讲解

DynamicData儿子组件讲解

InputItem孙子组件讲解

vue动态生成表单元素基础篇

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

vue-form-maker:Vue 表单生成器——动态生成表单组件

vue动态生成表单输入框，并动态生成v-model（动态生成v-model遇到的坑）

Vue动态生成表单组件vue-form-maker

VUE动态生成word的实现

Vue动态生成form表单+校验

使用Vue生成动态表单

vue构建动态表单的方法示例

用Vue生成动态表单

vue动态生成新表单并且添加验证校验规则

详解Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）

vue-form-component:一个可以动态生成表单项的form表单组件

vue+element创建动态的form表单及动态生成表格的行和列

vueelementui动态表单

vue动态生成表单并加验证规则，input输入框无法输入

Vue动态生成el-checkbox点击无法赋值的解决方法

vue自定义表单生成器form-create使用详解

vue动态生成表单组件vue-generate-form

vue实现动态生成表格

vue动态生成表单

使用Vue动态生成form表单的实例代码

vue动态生成表单

Vue+Element实现动态生成新表单并添加验证功能

vue动态生成表单元素

一、页面展示：

Vue-UEedit UEedit

二、思路：

三、难点：

四、结构上分析：

（1）数据类型： 两层数据，三层数据，四层数据

（2）生成类型：

（3）关键值传递： 新增/编辑来回数据格式化转换：

（4）监听第二三层数据变化，实现数据实时改变：

五、代码分析：

动态生成数据父组件讲解

DynamicData儿子组件讲解

InputItem孙子组件讲解

vue动态生成表单元素基础篇

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

vue-form-maker:Vue 表单生成器——动态生成表单组件

vue动态生成表单输入框，并动态生成v-model（动态生成v-model遇到的坑）

Vue动态生成表单组件vue-form-maker

VUE动态生成word的实现

Vue动态生成form表单+校验

使用Vue生成动态表单

vue构建动态表单的方法示例

用Vue生成动态表单

vue动态生成新表单并且添加验证校验规则

详解Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）

vue-form-component:一个可以动态生成表单项的form表单组件

vue+element创建动态的form表单及动态生成表格的行和列

vueelementui动态表单

vue动态生成表单并加验证规则，input输入框无法输入

Vue动态生成el-checkbox点击无法赋值的解决方法

vue自定义表单生成器form-create使用详解

vue动态生成表单组件vue-generate-form

vue实现动态生成表格

vue动态生成表单

Vue-UEedit

UEedit

（1）数据类型：两层数据，三层数据，四层数据

（3）关键值传递：新增/编辑来回数据格式化转换：