博客

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: '',
       
        },

就这3个步骤别忘记啦。

嘻嘻嘻。记录自己所遇到的问题，如果有更好的方法，希望在评论区 留言互免学习哇。