vue用element封装了一个form有时候会出现无法输入的情况

多次切换页面标签有几个可以输入但是wacth无法监控它的变化,
表单验证也无法通过
clipboard.png

clipboard.png

form相关代码

<div id="form">

<el-dialog
  :title="form.title"
  :visible.sync="form.dialogFormVisible"
  width="30%"
  custom-class="formConet"
  :before-close="resetForm"
  lock-scroll
  :close-on-click-modal="false"
>
  <el-form
    :model="formData"
    label-position="rigth"
    label-width="95px"
    ref="form"
    :rules="rules"
  >
    <template v-for="(item, index) in form.formList">
     。。。。。
      <el-form-item :label="item.name" :prop="item.id" :key="index" v-else>
        <el-input
          clearable
          v-model.trim="formData[item.id]"
          :placeholder="item.title"
          :disabled="item.disabled"
        ></el-input>
      </el-form-item>

form的js

props: {

form: Object, // 表单数据渲染
formData: Object, // 保存数据对象
rules: Object, // 匹配规则
formButton: {
  type: [Object, Array],
  default: () => [
    {
      name: "取消"
    },
    {
      name: "确定"
    }
  ]
}

},
watch: {

"form.dialogFormVisible": {
  handler(e) {
    if (!e) {
      let keys = Object.keys(this.formData);
      for (let i of keys) {
        this.$nextTick(() => {
          this.formData[i] = "";
        });
      }
    } else {
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });
    }
  },
  deep: true
},
'formData' (news,lod){ // 这里监控变化
  console.log(news,lod)
}

},

// 父级传递数据
<form-tab

  :form="form"
  :form-data="formData"
  ref="forms"
  :rules="rules"
  @submitForm="formSubmit"
></form-tab>

onAdds() {

  // 添加项目
  this.form.title = "添加项目";
  this.form.dialogFormVisible = true;
},

formData: {},

  form: {
    // 弹出框信息
    title: "", // 表单title
    dialogFormVisible: false, // 表单显示|隐藏
    formList: [
      {
        name: "项目名称",
        id: "projectName",
        title: "请输入项目名称",
        type: "input"
      },
      {
        name: "公司",
        id: "company",
        title: "请输入公司",
        type: "input"
      },
      {
        name: "联系人",
        id: "linkMan",
        title: "请输入联系人",
        type: "input"
      },
      {
        name: "联系电话",
        id: "linkPhone",
        title: "请输入联系电话",
        type: "input"
      }
    ]
  },
阅读 3.8k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题