基于VUE2.0的动态表单

直接上干活

1、自定义的字段属性，可通过json、表结构来实现，我比较懒直接新增了字段表，主要是方便开发过程中及时调整设置。json的话对历史数据修改比较麻烦。

自定义的一些关键字段属性，包括校验一类的我直接上rule规则代码了，如果有其他要求可按照rule新增，其中col_value_type是我自定义的表单类别，目前完成的有 文本、富文本、人员选择器、日期狂等等。

• 组件部分代码
• 1、文本

<template> 
 <el-input 
      ref="input"
     :value="value"
     :placeholder="'请输入'+item.colName" 
     @input="$emit('input', $event)"
       />
    
</template>

<script> 
 
    export default {
        name:"textview", 
        props: ['value','item'],
        data() {
            return { 
            }
        } 
    }
</script> 

• 2、选择框

<template> 
   <el-select
   :value="value"  clearable
   @input="$emit('input', $event)"
  >
    <el-option
    v-for="dict in dictText"
    :key="dict"
    :label="dict"
    :value="dict"
    ></el-option>
</el-select> 
</template>

<script>  
    export default {
        name:"dictview", 
        props: ['item','value' ], 
        mounted(){
           this.dictText=this.item.dictValue.split(",");   //前端对象里面封装的选择字段，可根据需求自定义扩展
        },
        data() {
            return {
                 dictText:[]
            }
        } 
    }
</script>  

• 3、人员选择器

<template>
 <div>
    <el-input v-model="userName"  :disabled="true" >
      <el-button  slot="append" 
       
         ref="inputUser"
         :value="value"
         @click="selectUser"
         @input="$emit('input', $event)"
        
         >选择人员
        </el-button> 
    </el-input>
      <user-org ref="userOrg" :callBackSelectUser="callBackSelectUser" />
    
    </div>
</template>

<script> 
 
import userOrg from "@/views/components/MesUserOrg/index";

    export default {
        name:"mesuserview", 
        props: ['item','value'],
        components:{userOrg},
        data() {
            return {
                    userName:null,
                    userId:null
            }
        },created(){
            if(this.value!=null){
 
                let userKey= this.value["userId"];
                let userVal= this.value["userName"];
 
                this.userName=userVal;
                this.$emit('input', this.value );

            }
        },methods:{
            selectUser(){
                this.$refs.userOrg.openSelect(false);
            },callBackSelectUser(userList){
              //返回的用户处理逻辑
                this.$emit('input', userObj);
          } 
        } 
    }
</script> 

其他的根据实际情况扩展

• 页面加载
  
  所有组件统一加载，

import * as formview  from '@/views/***/index' ; 

export default {
  name: "Flow",
  dicts: ['lims_camunda_state'],
    components:formview,

主表调用加载

<el-row  >
                       <el-col  v-for="formCol in formType.formColList"  :span="formCol.colNum" > 
                         <el-form-item 
                         v-if="formCol.colSubMain=='main'" 
                         :key="formCol.formColId" 
                         :label="formCol.colName" 
                         :prop="formCol.colNameCode"  
                         :rules="formCol.colRuleObj"
                         >
                            <component 
                            v-model="form[formCol.colNameCode]"
                            :is="formCol.colValueType" 
                            :item="formCol"
                            @extendFun="changeComponentHandle"
                            ></component>
                        </el-form-item>
                        </el-col>
                   </el-row>

子表调用加载

 <el-table  v-if="formType.hasSubDataList"  :data="subDataList" 
       @selection-change="handleSelectionChange"
       ref="subDataList"  :row-class-name="rowQcMainBatchIndex"  >
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column label="序号" align="center" prop="index" width="50"/>
          <el-table-column v-for="formCol in formType.formColList"   :label="formCol.colName" :prop="formCol.colNameCode"
          v-if="formCol.colSubMain=='sub'"
          width="150">
            <template slot-scope="scope">
                <el-form-item  label-width="0"
                :prop="'subDataList.' + scope.$index + '.'+formCol.colNameCode"
                :rules="formCol.colRuleObj"
                 > 
                 
                 <component 
                    :item="formCol" 
                    :is="formCol.colValueType" 
                    v-model="subDataList[scope.$index][formCol.colNameCode]"
         
                    ></component>
                </el-form-item>
            </template>
          </el-table-column>
          
 
        </el-table>

如此即可实现动态表单加载了。

市面上的如Form Generator 一类的表单设计器如果对于简单的功能页面没有问题，但是我涉及的业务比较复杂，这种表单设计器和业务关联存在一定问题，所以我采用了这种原始办法，好处就是可已根据业务复杂度及时调整，并且支持主子表扩展。
一句话，适合自己的就是最好的。

第一次写技术总结，估计排版有点乱，大家将就下，如果有什么好的改进建议，欢迎大家留言。