el-form重置输入框内容

输入框的样式

代码

<el-form :inline="true" :model="queryInfo" class="demo-form-inline" ref="tableSearch">
      <div class="search_container">
        <el-form-item label="名称" prop="name">
          <el-input v-model="queryInfo.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryInfo.status" placeholder="请选择状态">
            <el-option v-for="item in statusList" :key="item.type" :label="item.name" :value="item.type">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker v-model="queryInfo.startTime" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker v-model="queryInfo.endTime" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
      </div>
      <div class="search_container">
        <el-form-item> </el-form-item>
        <el-form-item> </el-form-item>
        <el-form-item> </el-form-item>
        <el-form-item>
          <div class="search_item">
            <div class="btn reset" @click="resetForm">重置</div>
            <div class="btn search" @click="searchDetail">查询</div>
          </div>
        </el-form-item>
      </div>
    </el-form>

data(){
    return {
      queryInfo:{
        name: '',
        status: '',
        startTime:'',
        endTime: '',
      },
      statusList:[
        {type:1,name:'一般'},
        {type:2,name:'紧急'},
        {type:3,name:'危急'},
      ]
    }
  },
  methods:{
    resetForm() {//重置
      this.$refs["tableSearch"].resetFields();
    },
    searchDetail(){//查询

    }
  }