vue动态表单+验证

欢迎使用Markdown编辑器

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

<el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
  <el-form ref="form" :model="form" :rules="rules" label-width="300px">
    <el-row>
      <el-col width="12" v-for="(arr, index) in this.dataFrom" :key="arr.key">
        <el-form-item :label="arr.title" class="form-item-s" :prop="arr.key">
          <el-input
            class="form-item-s"
            autocomplete="off"
            type="text"
            :key="arr.key"
            v-model="form[arr.key]"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitForm">确 定</el-button>
    <el-button @click="cancel">取 消</el-button>
  </div>
</el-dialog>

功能快捷键

 data() {

```python
    return {
    
      // 表单参数
      form: {},
      dataFrom:[],
      // 表单校验
      rules: {

      }
    };
  },

## 如何创建一个注脚

 

```python


handleAdd() {
      this.dataFrom=[];
      this.form= {};
      let fontStr = [
          {
            "filedId"   : "1",
            "fieldName" : "是否优秀",
            "fieldCode" : "sfyx",
            "fieldType" : "1"
          },
          {
            "filedId"   : "2",
            "fieldName" : "供应商信息",
            "fieldCode" : "gysxx",
            "fieldType" : "1"
          },
          {
            "filedId"   : "3",
            "fieldName" : "供应商电话",
            "fieldCode" : "gysdh",
            "fieldType" : "1"
          }
      ];
      fontStr.forEach(err=>{
        let dataObject={
          key:err.fieldCode,
          title:err.fieldName,
          value:''
        }
        this.$set(this.form, err.fieldCode, '')
        let rulesList=[{ required: true, message: err.fieldName+"不能为空", trigger: "blur" }]
        this.$set(this.rules, err.fieldCode, rulesList)
        this.dataFrom.push(dataObject);
      })
      console.log(JSON.stringify(this.form));
      console.log(this.dataFrom);
      console.log(JSON.stringify(this.rules));
      // this.reset();
      this.open = true;
      this.title = "新增参数";
      // this.title = "添加参数";
    },