踩坑之在 vue+element select筛选框重置resetFields()失效

最新推荐文章于 2025-01-14 16:42:13 发布

candybaby1223

最新推荐文章于 2025-01-14 16:42:13 发布

阅读量5.5k

点赞数 4

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/candybaby1223/article/details/106898994

在 Vue.js + Element UI 的项目中，遇到使用 `resetFields()` 重置表单时，select 筛选框无法重置的问题。经发现，`resetFields()` 方法仅对 input 框有效。为解决下拉框重置问题，需确保 v-model 绑定的属性存在于 data 中，并手动设置值。通过以下三个步骤实现：1) 设置 v-model 属性；2) 找到并执行重置方法，为相关字段赋空值；3) 确保在 data 中定义了相关对象。欢迎评论区分享更多解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element select筛选框重置办法

突然之间发现element 自带的重置组件resetFields() 只对input框有效，下拉框，完全点不动。
需求如下
下拉框选择数值，点击重置，清空刚才你的选择。在这里插入图片描述

1这里的 v-model="dataForm.year 和 v-model=“dataForm.month” 这两个属性很重要。然后找到重置方法

<el-row>
              <el-col :span="6">
                <el-form-item label="年度" >
                  <el-select v-model="dataForm.year" placeholder="请选择年度" clearable>
                    <el-option
                      v-for="item in yearList"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="月度">
                  <el-select v-model="dataForm.month" filterable placeholder="请选择月度" clearable>
                    <el-option
                      v-for="item in mouthList"
                      :key="item.value"
                      :label="item.lable"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                  </el-col>
              <el-form-item class="serach-region">
                <el-button size="small" class="reset-btn" @click=" resetForm(dataForm)">重置</el-button>
                <el-button size="small" class="serach-btn" @click="searchHandle(dataForm)">查询</el-button>
              </el-form-item>
            </el-row>

2 然后找到重置放法，设置值进去`

  //重置数据
      resetForm() {
        this.dataForm.year='请选择年度'
        this.dataForm.month='请选择月度'

3最后一步记得别忘记点定义啦是否在data中设置了对象.

 export default {
    mixins: [requestTime],
    data() {
      return {
        uploadUrl: '',
        // 新增或编辑弹窗的可见标识
        dialogVisible: false,
        dataListSelections: [],
        dataForm: {
          year: '',//在这里定义哟
          month: '',
       
        },