vue动态表单动态渲染组件

时间:2022-05-28 兮木兮木人气:1

vue 实现动态表单/动态渲染组件的方式（一），供大家参考，具体内容如下

思路

先写好各个可能会出现的表单或者自定义的组件，引入。
此时后端可能会给到一个对象型数组，每个对象有要渲染组件的一个类型标识
利用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实现动态表单动态渲染组件的方式(2)

加载全部内容