Day05-讲师列表前端-按条件查询、清空数据

1、按条件查询

  <!-- 按条件查询 -->
  <el-form :inline="true"  class="demo-form-inline">
    <el-form-item>
      <el-input v-model="teacherQuery.name" placeholder="名称"></el-input>
    </el-form-item>
    
    <el-form-item>
       <el-select v-model="teacherQuery.level" placeholder="讲师头衔">
        <el-option :value="1" label="高级讲师" ></el-option>
        <el-option :value="2" label="首席讲师"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
        <el-date-picker 
          v-model="teacherQuery.begin"
          type="datetime" 
          placeholder="选择开始时间"
          value-format="yyy-MM-dd HH:mm:ss" 
          default-time="00:00:00">
        </el-date-picker>
    </el-form-item>

    <el-form-item>
        <el-date-picker 
          v-model="teacherQuery.end"
          type="datetime" 
          placeholder="选择开始时间"
          value-format="yyy-MM-dd HH:mm:ss" 
          default-time="00:00:00">
        </el-date-picker>
    </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
      <el-button  icon="el-icon-delete" @click="resetData()">清空</el-button>
  </el-form>

2、清空表单中的数据

清空表单中的数据前端代码:

清空表中数据的方法：

 	    resetData(){//清空数据的方法
          //表单输入项数据清空
          this.teacherQuery={}
          //查询所有数据
          this.getList()
        }