使用ElementUI遇到TS的问题Property 'resetFields' does not exist on type 'Vue'

    methods: {
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }

错误提示如下:
“Property ‘resetFields’ does not exist on type ‘Vue | Element | Vue[] | Element[]’.
Property ‘resetFields’ does not exist on type ‘Vue’.
any”
实际运行也没问题,但是我想去掉任何警告,请问该怎么做。

const ref: any = this.$refs[formName]
ref.resetFields()

resetFields() 并不是 Vue 的方法,而是你某个组件的方法。所以你需要把 this.$refs[formName] 显式标注为那个组件类型,比如:

resetForm (formName) {
  (<WhateverForm>this.$refs[formName]).resetFields()

  // 或者不喜欢一堆括号的话:
  const formRef = <WhateverForm>this.$refs[formName]
  formRef.resetFields()
}

谢谢,确实没错误了,但是我不想用any类型

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="login-container">
            <el-form-item style="width:100%">
                <el-button type="primary" style="width:100%" @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>

element-ui下找到个form-item.d.ts文件

import { ElementUIComponent, ElementUIComponentSize } from './component'

/** FormItem Component */
export declare class ElForm extends ElementUIComponent {
  /** Reset current field and remove validation result */
  resetField (): void
}

不知道这个类该怎么用

const ref:ElForm=this.$refs[formName];
const ref=this.$refs[formName];
new ElForm();
都会Cannot find name ‘ElForm’.

import {Form as ElForm} from 'element-ui'

const ref = <ElForm>this.$refs.ruleForm
ref.resetFields()
1 Like

谢谢二位,完美解决这个问题