目录

1、封装表单

2、注意的点

1、封装表单

        表单里面包含了input 、select、普通时间、年、文本域等。

 <!-- 公共form表单 -->
  <el-dialog class="dialogStyleT" center v-model="dialogVisible" :title="titleID" width="45%"   custom-class="dialogStyle"
             :before-close="handleClose"
    draggable>
    <el-form :model="formInline" :inline="true" :rules="rules" ref="formInline" label-width="100px" class="demo-ruleForm">

      <el-form-item v-for="(form, index) in formArray" :label="form.label+'：'" :prop="form.formOrTable === true ? form.formProp : form.prop">
        <!-- input输入框 -->
        <el-input v-if="form.type === 'input'" :type="form.isnumberInput === true ? 'number' : 'input'"  :disabled="form.isdisabled"
          :readonly="form.isreadonly" v-model="formInline[form.prop]" :placeholder="'请输入' + form.label"></el-input>
        <!-- 分组选择下拉框 -->
        <el-select @change="((val) => { changeValue(val, form.Options, form.label) })"
          v-if="form.type === 'selectByGroup'" :disabled="form.isdisabled"
          v-model="formInline[form.formOrTable === true ? form.formProp : form.prop]" :placeholder="'请选择' + form.label">
          <el-option-group v-for="group in form.Options" :key="group.label" :label="group.label+'：'">
   <!--  // DataID 可更换为所对应使用的字段  -->
            <el-option v-for="item in group.options" :key="form.isDict ? item.DataID : item.ID"
              :label="item[form.optionItemNames]+'：'" :value="form.isDict ? item.DataID : item.ID">
            </el-option>
          </el-option-group>
        </el-select>
        <!-- 普通下拉框       -->
        <el-select :disabled="form.isdisabled" v-model="formInline[form.formOrTable === true ? form.formProp : form.prop]"
                   @change="(val) => { changeValue(val, form.Options, form.label) }"
          :placeholder="'请选择' + form.label" v-if="form.type === 'select'">
          <el-option v-for="item in form.Options" :label="item[form.optionItemNames]+'：'"
            :value="form.isDict ? item.DataID : item.ID">
          </el-option>
        </el-select>
        <!-- 时间选择器 -->
        <el-date-picker v-if="form.type === 'date'" :readonly="form.isreadonly" v-model="formInline[form.prop]"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        :disabled="form.isdisabled"
          type="date" :placeholder="'选择' + form.label"></el-date-picker>
        <!--时间选择器 /年        -->
        <el-date-picker
            v-else-if="form.type === 'year'"
            :readonly="form.isreadonly"
            v-model="formInline[form.prop]"
            format="YYYY"
            value-format="YYYY"
            type="year"
            :placeholder="'选择' + form.label">
        </el-date-picker>
        <!-- 输入框类型 -->
        <el-input v-if="form.type == 'inputText'"  type="textarea" v-model="formInline[form.prop]"
          :placeholder="'请输入' + form.label" :disabled="form.isdisabled"></el-input>
      </el-form-item>
      <el-form-item style="width: 95%;margin:0">
        <div class="constrctl_formBtn">
          <span class="dialog-footer">
              <el-button type="primary" @click="setAddData">
              保存
            </el-button>
            <el-button @click="closeDialog">取消</el-button>

          </span>
        </div>
      </el-form-item>

    </el-form>

  </el-dialog>



<script>
  data() {
    return {
      //选中行数据
      row: null,
      //模态框的显示隐藏
      dialogVisible: false,
      //判断是新增还是编辑
      titleID: null,
      //表单数据
      formInline: {},
      //表单数据
      formArray: [ ],
      Options: [],
    }
  },
  //方法集合
  methods: {
 //下拉框切换数据的方法
    changeValue(val, list, label) {},
    //确认
    setAddData() {
      this.$refs.formInline.validate((valid) => {
        if (valid) {
           //把数据传给父组件，进行使用
          this.$emit("getData", this.formInline)
        } else {
          console.log("error submit!!");
          return false;
        }
      })
    },
    //取消
    closeDialog(){
           //清空表单
      this.$refs.formInline.resetFields();
      this.dialogVisible = false;
    },
    //关闭模态框
    handleClose(done) {
      done();
      this.closeDialog();
    },
  },
</script>

2、注意的点

在vue2中使用的：使用的是 :visible.sync=“dialogVisible”

在vue3中使用：是使用的v-model="dialogVisible"

3、使用： 

提示：如果表格table中也是使用的这些字段；也可同样附到表格上

<script>
   //form的表单名称
      Configs: [
        {
          label: "单位名称",
          prop: "StationName",//同时为 Form、Table中的  prop 属性
          type: "input",
          formProp: "StationID",//当 formOrTable 为 true 时，From 中的 prop不生效，使用此属性
          formOrTable: true, //是否为命运共同体？ 此数组中此对象同时用于Table、Form表单，回显无法对应时使用
          isDict: true,
          direction: "center",
          isdisabled: true,
        },
        {
          label: "完成日期",
          prop: "CompletionDate",
          type: "date",
          isDict: false,
          isreadonly: false,//是否只读
          // isdisabled: false,//是否禁用
          direction: "center",
        },
    {
          label: "名称",
          prop: "EquipmentName",//同时为 Form、Table中的  prop 属性
          type: "select",
          formProp: "EquipmentID",//当 formOrTable 为 true 时，From 中的 prop不生效，使用此属性
          formOrTable: true, //是否为命运共同体？ 此数组中此对象同时用于Table、Form表单，回显无法对应时使用
          optionItemNames: "DataName",
          Options: [],//字典数组    是否    若使用模拟字典数据时   isDict必须为 True ，此处树形对应组件中的三元表达式

//字段如下面所示：可更改，但记得表单中的也要更换
   // Options: [
          //   {
          //     DataID: 1,
          //     DataName: "巡检中",
          //   },
          //   {
          //     DataID: 2,
          //     DataName: "已完成",
          //   }
          // ],//字典数组    是否    若使用模拟字典数据时   isDict必须为 True ，此处树形对应组件中的三元表达式
          isDict: true,
          direction: "center",
        },
        {
          label: "备注",
          prop: "Dsc",
          type: "inputText",
          isreadonly: false,
          direction: "center",
          isdisabled: false
        },

      ],
</script>