vue-admin-template-master 添加查询条件

1、添加组件

（1）设置 inline 属性可以让表单域变为行内的表单域,为true时为同行显示

（2）注意控件的 v-model双向绑定属性

（3）点击查询调用getList()方法

<el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="teacherQuery.name" placeholder="讲师名" />
      </el-form-item>
      <el-form-item>
        <el-select v-model="teacherQuery.level" clearable placeholder="讲师头衔">
          <el-option :value="1" label="高级讲师" />
          <el-option :value="2" label="首席讲师" />
        </el-select>
      </el-form-item>
      <el-form-item label="添加时间">
        <el-date-picker
          v-model="teacherQuery.begin"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="teacherQuery.end"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="getList()">查 询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>

2、页面脚本部分

 

<script>
//引入调用teacher.js文件
import teacher from "@/api/teacher/teacher";

export default {
  data() {
    //定义变量和初始值
    return {
      list: null, //查询之后接口返回的集合
      page: 1, //当前页
      limit: 10, //每页记录数
      total: 0, //总记录数
      teacherQuery: {
        //条件封装对象，上述表单控件内的参数可以赋值也可以不赋值
      },
    };
  },
  created() {
    //页面渲染之前执行，一般调用methods定义的方法
    this.getList();
  },
  methods: {
    //创建具体的方法，调用teacher.js定义的方法
    getList(page = 1) {
      //如果page无具体的值则默认赋值1
      this.page = page; //获取组件page值并进行值传递
      teacher
        .getTeacherListPage(this.page, this.limit, this.teacherQuery)
        .then((response) => {
          //請求成功
          //response接口返回的数据
          this.list = response.data.rows;
          this.total = response.data.total;
        })
        .catch((error) => {
          console.log(console.error());
        });
    },
    resetData(){ //表单输入项数据清空，双向绑定，直接将对象赋值为空即可
      this.teacherQuery={} 
      //查询所有讲师数据
      this.getList()

    }
  },
};
</script>