增添条件查询+分页

src/views/car/fence.vue

@@ -1,5 +1,35 @@
 <template>
   <div>
+    <el-form :model="selectQuery">
+
+      <el-form-item >
+        <el-input v-model="selectQuery.fenceName"  placeholder="请输入围栏名称"></el-input>
+      </el-form-item>
+
+
+      <el-form-item label="行驶状态查询" style="width: 25%">
+        <el-select v-model="selectQuery.driveStatus" placeholder="请选择行驶状态">
+          <el-option label="请选择" value=""></el-option>
+          <el-option label="驶入" value="1"></el-option>
+          <el-option label="驶出" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+
+
+      <el-form-item label="围栏状态" style="width: 25%">
+        <el-select v-model="selectQuery.fenceStatus" placeholder="请选择围栏状态">
+          <el-option label="请选择" value=""></el-option>
+          <el-option label="停用" value="0"></el-option>
+          <el-option label="正常" value="1"></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item style="width: 25%">
+        <el-button @click="onSubQuery">搜索</el-button>
+      </el-form-item>
+
+    </el-form>
+
     <el-button type="success" plain @click="upiInsertDialog" icon="el-icon-check">添加围栏</el-button>
     <el-button type="danger" plain @click="deleteFence()" icon="el-icon-check">删除围栏</el-button>
 
@@ -50,6 +80,21 @@
 
     </el-table>
 
+<!--    分页-->
+<el-form :model="selectQuery">
+
+  <div class="block">
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :page-sizes="[5, 10, 15, 20]"
+      :page-size="selectQuery.pageSize"
+      layout="sizes, prev, pager, next"
+      :total="total">
+    </el-pagination>
+  </div>
+
+</el-form>
     <el-dialog :visible.sync="dialogVisible" width="70%">
 
       <div id="container" ></div>
@@ -133,6 +178,17 @@ export default {
   // },
 
   methods: {
+    onSubQuery() {
+        this.getFenceList()
+    },
+    handleSizeChange(val) {
+      this.selectQuery.pageSize = val
+      this.getFenceList()
+    },
+    handleCurrentChange(val) {
+      this.selectQuery.pageNum = val
+      this.getFenceList()
+    },
     handleSelectionChange(val) {
       this.dis = val;
     },