Element-UI动态生成表单【包含字典翻译，旧值对比，但绑定动态表单验证待补充】

 

控件类型：

        T:文本输入， TA：TextArea，S:下拉选，D:日期控件，N:数字输入，C:复选，R:单选，SW：开关

 vue文件：

          <el-form
            v-if="formData.length > 0"
            ref="config"
            :model="params"
            class="prodetail"
            label-width="120px"
            size="small"
          >
            <el-form-item
              v-for="(item,index) in formData"
              :key="index"
              :label="item.labelText"
              :prop="item.paramName"
            >
              <div v-if="showOldValue=='0'" class="pro">
                <!--文本输入 T -->
                <el-input
                  v-if="item.ctrlType==='T'"
                  v-model="item.paramValue"
                  :disabled="true"
                />
                <!--文本域 TA -->
                <el-input
                  v-if="item.ctrlType==='TA'"
                  v-model="item.paramValue"
                  type="textarea"
                  :rows="3"
                  maxlength="2048"
                  :disabled="true"
                />
                <!--S:下拉选 -->
                <el-select
                  v-if="item.ctrlType==='S'"
                  v-model="item.paramValue"
                  :disabled="true"
                >
                  <template v-if="item.valueList">
                    <el-option
                      v-for="dict in getValueList(item.valueList||'')"
                      :key="dict.subitem"
                      :label="dict.subitemname"
                      :value="dict.subitem"
                    />
                  </template>
                  <template v-if="item.dictItem">
                    <el-option
                      v-for="dict in getdict(item.dictItem)"
                      :key="dict.dictItem"
                      :label="dict.dictItemName"
                      :value="dict.dictItem"
                    />
                  </template>
                </el-select>
                <!--D:日期控件 -->
                <el-date-picker
                  v-if="item.ctrlType==='D'"
                  v-model="item.paramValue"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="yyyy-MM-dd"
                  type="date"
                  :disabled="true"
                >
                </el-date-picker>
                <!--N:数字输入 -->
                <el-input-number
                  v-if="item.ctrlType==='N'"
                  v-model="item.paramValue"
                  :min="0"
                  :max="9999"
                  :disabled="true"
                />
                <!--C:复选 -->
                <el-checkbox-group
                  v-if="item.ctrlType==='C'"
                  v-model="item.paramValue"
                  :disabled="true"
                >
                  <el-checkbox-button
                    v-for="ckitem in item.valueList"
                    :key="ckitem.subitem"
                    :label="ckitem.subitem"
                  >
                    {{ ckitem.subitemname }}
                  </el-checkbox-button>
                </el-checkbox-group>
                <!--R:单选 -->
                <el-radio-group
                  v-if="item.ctrlType==='R'"
                  v-model="item.paramValue"
                  :disabled="true"
                >
                  <el-radio-button
                    v-for="dict in item.valueList"
                    :key="dict.subitem"
                    :label="dict.subitem"
                  >
                    {{ dict.subitemname }}
                  </el-radio-button>
                </el-radio-group>
                <!--SW：开关 -->
                <el-switch
                  v-if="item.ctrlType==='SW'"
                  v-model="item.paramValue"
                  :disabled="true"
                />
              </div>
              <div v-if="showOldValue=='1'" class="prochange">
                <!--文本输入 T -->
                <div v-if="item.ctrlType==='T'">
                  <el-input
                    v-model="item.paramOldValue"
                    maxlength="128"
                    :disabled="true"
                  />=>
                  <el-input
                    v-model="item.paramValue"
                    class="changemsg"
                    maxlength="128"
                    :disabled="true"
                  />
                </div>
                <!--文本域 TA -->
                <div v-if="item.ctrlType==='TA'">
                  <el-input
                    v-model="item.paramOldValue"
                    type="textarea"
                    :rows="3"
                    maxlength="2048"
                    :disabled="true"
                  />
                  <span>=></span>
                  <el-input
                    v-model="item.paramValue"
                    type="textarea"
                    class="changemsg"
                    :rows="3"
                    maxlength="2048"
                    :disabled="true"
                  />
                </div>
                <!--S:下拉选 -->
                <div v-if="item.ctrlType==='S'">
                  <el-select
                    v-model="item.paramOldValue"
                    :disabled="true"
                  >
                    <template v-if="item.valueList">
                      <el-option
                        v-for="dict in getValueList(item.valueList||'')"
                        :key="dict.subitem"
                        :label="dict.subitemname"
                        :value="dict.subitem"
                      />
                    </template>
                    <template v-if="item.dictItem">
                      <el-option
                        v-for="dict in getdict(item.dictItem)"
                        :key="dict.dictItem"
                        :label="dict.dictItemName"
                        :value="dict.dictItem"
                      />
                    </template>
                  </el-select>=>
                  <el-select
                    v-model="item.paramValue"
                    class="changemsg"
                    :disabled="true"
                  >
                    <template v-if="item.valueList">
                      <el-option
                        v-for="dict in getValueList(item.valueList||'')"
                        :key="dict.subitem"
                        :label="dict.subitemname"
                        :value="dict.subitem"
                      />
                    </template>
                    <template v-if="item.dictItem">
                      <el-option
                        v-for="dict in getdict(item.dictItem)"
                        :key="dict.dictItem"
                        :label="dict.dictItemName"
                        :value="dict.dictItem"
                      />
                    </template>
                  </el-select>
                </div>
                <!--D:日期控件 -->
                <div v-if="item.ctrlType==='D'">
                  <el-date-picker
                    v-model="item.paramOldValue"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                    type="date"
                    :disabled="true"
                  >
                  </el-date-picker>=>
                  <el-date-picker
                    v-model="item.paramValue"
                    class="changemsg"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                    type="date"
                    :disabled="true"
                  >
                  </el-date-picker>
                </div>
                <!--N:数字输入 -->
                <div v-if="item.ctrlType==='N'">
                  <el-input-number
                    v-model="item.paramOldValue"
                    :min="0"
                    :max="9999"
                    :disabled="true"
                  />=>
                  <el-input-number
                    v-model="item.paramValue"
                    class="changemsg"
                    :min="0"
                    :max="9999"
                    :disabled="true"
                  />
                </div>
                <!--C:复选 -->
                <div v-if="item.ctrlType==='C'">
                  <el-checkbox-group
                    v-model="item.paramOldValue"
                    :disabled="true"
                  >
                    <el-checkbox-button
                      v-for="ckitem in item.valueList"
                      :key="ckitem.subitem"
                      :label="ckitem.subitem"
                    >
                      {{ ckitem.subitemname }}
                    </el-checkbox-button>
                  </el-checkbox-group>=>
                  <el-checkbox-group
                    v-model="item.paramValue"
                    :disabled="true"
                  >
                    <el-checkbox-button
                      v-for="ckitem in item.valueList"
                      :key="ckitem.subitem"
                      :label="ckitem.subitem"
                    >
                      {{ ckitem.subitemname }}
                    </el-checkbox-button>
                  </el-checkbox-group>
                </div>
                <!--R:单选 -->
                <div v-if="item.ctrlType==='R'">
                  <el-radio-group
                    v-model="item.paramOldValue"
                    :disabled="true"
                  >
                    <el-radio-button
                      v-for="dict in item.valueList"
                      :key="dict.subitem"
                      :label="dict.subitem"
                    >
                      {{ dict.subitemname }}
                    </el-radio-button>
                  </el-radio-group>=>
                  <el-radio-group
                    v-model="item.paramValue"
                    :disabled="true"
                  >
                    <el-radio-button
                      v-for="dict in item.valueList"
                      :key="dict.subitem"
                      :label="dict.subitem"
                    >
                      {{ dict.subitemname }}
                    </el-radio-button>
                  </el-radio-group>
                </div>
                <!--SW：开关 -->
                <div v-if="item.ctrlType==='SW'">
                  <el-switch
                    v-model="item.paramOldValue"
                    :disabled="true"
                  />=>
                  <el-switch
                    v-model="item.paramValue"
                    :disabled="true"
                  />
                </div>
              </div>
            </el-form-item>
          </el-form>

TS文件：

    //data

    formData = [];// 返回全部

    //method

    /**
     * 动态表单获取字典翻译
     */
    getdict(dictnum){
      return dict$.getOpts(dictnum);
    }
    /**
     * 动态表单获取ValueList的翻译
     * Str: "0|自动#1|手动"
     */
    getValueList(Str){
      var valueList = Str.split('#');
      var returnData = []
      for(var i=0;i<valueList.length;i++){
        var listrowdata = valueList[i].split('|');
        var item={
          subitem:listrowdata[0],
          subitemname:listrowdata[1]
        }
        returnData.push(item);
      }
      return returnData;
    }
    
    /**
     * 表单数据请求
     */
    async handleClick(row){
        let nowparam ="";
        const ret =await httpClient.post(API.qry_pro_funcDetail, nowparam);
        this.formData=ret.data;
    };

样式文件：

/deep/ .el-form-item {
    margin-bottom: 0;
    padding: 5px 0 10px 20px;
    line-height: 47px;
    .pro{
      /deep/ .el-input{
        width:83%;
      }
      /deep/ .el-select{
        width:100%;
      }
      /deep/ .el-textarea{
        width:83%;
      }
      /deep/ .el-input-number{
          .el-input{
            width:100%;
          }
      }
    }
    .prochange{
      /deep/ .el-input{
        width:40%;
      }
      /deep/ .el-select{
        width:40%;
        .el-input{
          width:100%;
        }
      }
      /deep/ .el-textarea{
        width:40%;
        display: inline-block;
        vertical-align: middle;
      }
      /deep/ .el-input-number{
          .el-input{
            width:100%;
          }
      }
      /deep/ .el-checkbox-group {
          font-size: 0;
          display: inline-block;
          vertical-align: middle;
      }
      .changemsg{
        .el-input__inner{
          color:green;
        }
        .el-textarea__inner{
          color:green;
        }
        .el-input__inner{
          color:green;
        }
        .el-input-number{
          .el-input__inner{
            color:green;
          }
        }
      }
    }
  }

后续还需要考虑加上动态表单验证。