关于vue element，使用表单时，input不能输入的问题

Z时代
2024-02-10
分类：IT

问题原因我估计有两类，一个是双向绑定不成功，还有一个就是change事件的时候，表单一直在调用自己的resetFields方法，但是我不知道该如何解决。

另外，这样的代码在另一个页面正常能运行，区别是这里是对话框，另一边是单页面。

代码如下

<template>
    <el-dialog :title="freeCoupleForm.id ? '编辑随心组合分类' : '新建随心组合分类'" :visible.sync="freeCoupleDialogVisible" :before-close="dialogClose()">
      <el-form ref="freeCoupleRef" :model="freeCoupleForm" :rules="freeCoupleRules" label-width="140px">
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple">
              <el-form-item label="随心组合分类名称:" prop="name">
                <el-input placeholder="请输入随心组合分类名称" v-model="freeCoupleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="随心组合分类描述:" prop="description">
                <el-input placeholder="请输入随心组合分类描述" v-model="freeCoupleForm.description"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="freeCoupleDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      freeCoupleDialogVisible: true,
      freeCoupleForm: {
        name: '',
        description: 'undefined',
        seqNum: 30,
        module: 'FREEDOM',
        type: 'CHOOSE'
      },
      freeCoupleRules: {
         name: [{ required: true, message: '请输入随心组合分类名称', trigger: 'blur' }],
         description: [{ required: true, message: '请输入随心组合分类描述', trigger: 'blur' }]
        // cover: [{ required: true, validator: validateCover, trigger: 'blur' }]
      }
    }
  },
  created() {},
  methods: {
    init(row) {
      this.freeCoupleDialogVisible = true
    },
    // 对话框关闭回调
    dialogClose() {
      this.$refs.freeCoupleRef && this.$refs.freeCoupleRef.resetFields()
    },
    confirm() {
      this.$emit('confirm', this.freeCoupleForm)
    }
  }
}
</script>

回答：

:before-close="dialogClose"

回答：

我粘贴代码试了一下，是你的before-close引起的，可能是只要弹窗失去焦点就会调用导致，到你聚焦输入框时弹窗输入焦点就执行dialogClose里的方法，
解决办法：你如果想把dialog封装成组件，不是那么容易的事情，你这么写是有很多问题的以下是正确的封装方法

父级：

使用组件
<DialogComponents :visible.sync="visible" />

子级：

<template>
<el-dialog :visible.sync="curVisible" @close="close"><el-dialog>
</tempalte>
<script>
export default{
    data(){
        return{
            curVisible:false
        }
    }
  props: ['visible'],
  watch:{
    visible(){
        this.curVisible = this.visible;
    }
  },
  methods:{
    close(){
      this.curVisible = false;
      this.$emit("update:visible", false);
      }
  }
}</script>