element Form 表单在 el-tab-pane 下<重置/清空>操作时报错怎么解决?

Question

问题描述:
只在el-tab-pane下有这样的提示.如果把代码提到外层就不会报错了?请问这个问题应该怎么解决呢?

错误提示:

本地代码:

            <el-tab-pane v-for="item in TabType" :label="item.name" :name="item.id" :key="item.id">
            <div v-show="true ? item.id == 1 || item.id == 2 || item.id == 3 : item.id == null">
                {{item.name}}
            </div>
            <div v-show="true ? item.id == 4 : item.id = null">
                <div class="fxn-search">
                    <el-form :inline="true" :model="SearchForm" :rules="SearchRules" ref="SearchForm">
                        <el-form-item label="状态" prop="bill_no">
                            <el-select v-model="SearchForm.status">
                                <el-option v-for="item in AvoidsStatus" :name="item.name" :key="item.id" :label="item.name" :value="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-button type="success">查询</el-button>
                        <el-button type="warning" @click="resetForm('SearchForm')">清空</el-button>
                    </el-form>
                </div>
            </div>
        </el-tab-pane>

export default {
data(){
return{
activeName: '1',

        //Tab类型
        TabType: [
            {id: '1',name: 'A栏目'},
            {id: '2',name: 'B栏目'},
            {id: '3',name: 'C栏目'},
            {id: '4',name: 'D栏目'},
        ],

        //申请状态
        AvoidsStatus: [
            {id: 1,name: '未处理'},
            {id: 2,name: '同意'},
            {id: 3,name: '拒绝'}
        ],

        //筛选
        SearchForm: {},
        SearchRules: {},
    }
},
methods:{
    //Tab 切换
    handleClick(tab, event) {
        console.log(tab, event);
    },

    //清空筛选条件
    resetForm(formName) {
        this.$refs[formName].resetFields();
    }
},
mounted(){

}

}

Answer 1

因为你的表单放在一个循环体了，所以你每次去拿根本拿不到，你要在循环体里面去拿this.$refs.SearchForm[0].resetFields