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>