# 优化分页、搜索

src/directive/el-table/adaptive.js

@@ -0,0 +1,42 @@
+
+import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'
+
+/**
+ * How to use
+ * <el-table height="100px" v-el-height-adaptive-table="{bottomOffset: 30}">...</el-table>
+ * el-table height is must be set
+ *  bottomOffset: 30(default)   // The height of the table from the bottom of the page.
+ */
+
+const doResize = (el, binding, vnode) => {
+  const { componentInstance: $table } = vnode
+
+  const { value } = binding
+
+  if (!$table.height) {
+    throw new Error(`el-$table must set the height. Such as height='100px'`)
+  }
+  const bottomOffset = (value && value.bottomOffset) || 30
+
+  if (!$table) return
+
+  const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset
+  $table.layout.setHeight(height)
+  $table.doLayout()
+}
+
+export default {
+  bind(el, binding, vnode) {
+    el.resizeListener = () => {
+      doResize(el, binding, vnode)
+    }
+
+    addResizeListener(el, el.resizeListener)
+  },
+  inserted(el, binding, vnode) {
+    doResize(el, binding, vnode)
+  },
+  unbind(el) {
+    removeResizeListener(el, el.resizeListener)
+  }
+}

src/directive/el-table/index.js

@@ -0,0 +1,14 @@
+
+import adaptive from './adaptive'
+
+const install = function(Vue) {
+  Vue.directive('el-height-adaptive-table', adaptive)
+}
+
+if (window.Vue) {
+  window['el-height-adaptive-table'] = adaptive
+  Vue.use(install); // eslint-disable-line
+}
+
+adaptive.install = install
+export default adaptive

src/lang/en.js

@@ -180,6 +180,7 @@ export default {
     deviceName: 'Device Name',
     humitureChart: 'Humiture chart',
     temperature: 'Temperature',
-    humidity: 'Humidity'
+    humidity: 'Humidity',
+    logSeachContent: 'Device ID/Name'
   }
 }

src/lang/zh.js

@@ -180,6 +180,7 @@ export default {
     deviceName: '设备名称',
     humitureChart: '温湿度',
     temperature: '温度',
-    humidity: '湿度'
+    humidity: '湿度',
+    logSeachContent: '设备名称/ID'
   }
 }

src/views/counter/logs.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="app-container">
-    <p class="warn-content">
-      {{$t('counter.logDesc')}}
-    </p>
+    <div class="filter-container">
+      <el-input @keyup.enter.native="handleFilter" size="small" style="width: 220px;" class="filter-item" :placeholder="$t('counter.logSeachContent')" v-model="logsListQuery.search">
+      </el-input>
+      <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('table.search')}}</el-button>
+    </div>
     <el-table
      v-loading="listLoading"
     :data="deviceCount"
@@ -19,6 +21,12 @@
         sortable
         min-width="150">
       </el-table-column>
+      <el-table-column
+        prop="device_name"
+        :label="$t('counter.deviceName')"
+        sortable
+        min-width="150">
+      </el-table-column>
       <el-table-column
         prop="signal"
         :label="$t('counter.signal')"
@@ -34,18 +42,6 @@
         prop="energy"
         :label="$t('counter.energy')"
         min-width="100">
-      </el-table-column>
-       <el-table-column
-        sortable
-        prop="temperature"
-        :label="$t('counter.temperature')"
-        min-width="100">
-      </el-table-column>
-       <el-table-column
-        sortable
-        prop="humidity"
-        :label="$t('counter.humidity')"
-        min-width="100">
       </el-table-column>
       <el-table-column
         prop="coordinate"
@@ -59,26 +55,35 @@
         min-width="150">
       </el-table-column>
     </el-table>
-    <el-pagination
-      class="pagination"
-      background
-      layout="total, prev, pager, next, jumper"
-      @current-change="handleCurrentChange"
-      @size-change="handleSizeChange"
-      :total="total">
-    </el-pagination>
+    <div class="pagination-container">
+      <el-pagination background
+        :current-page="1"
+        :page-sizes="[10,20,30,50]"
+        :page-size="logsListQuery.limit"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+    </div>
   </div>
 </template>
 
 <script>
 import { fetchDeviceLogs } from '@/api/counter'
+import waves from '@/directive/waves' // 水波纹指令
 export default {
   name: 'count',
+  directives: {
+    waves
+  },
   data() {
     return {
       deviceCount: [],
       listLoading: true,
-      total: 0
+      total: 0,
+      logsListQuery: {
+        search: undefined,
+        limit: 10,
+        page: 1
+      }
     }
   },
   methods: {
@@ -98,15 +103,20 @@ export default {
     handleCurrentChange(page) {
       // console.log(page)
       this.listLoading = true
-      this.getDeviceLogs({ page })
+      this.logsListQuery.page = page
+      this.getDeviceLogs(this.logsListQuery)
     },
-    handleSizeChange(page) {
-      this.listLoading = true
-      this.getDeviceLogs({ page })
+    handleSizeChange(val) {
+      this.logsListQuery.limit = val
+      this.getDeviceLogs(this.logsListQuery)
+    },
+    handleFilter() {
+      this.logsListQuery.page = 1
+      this.getDeviceLogs(this.logsListQuery)
     }
   },
   created() {
-    this.getDeviceLogs()
+    this.getDeviceLogs(this.logsListQuery)
   },
   deactivated() {
     this.$destroy(true)