vue 实现动态表单动态渲染组件的方式（一）

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>