优化列表小屏操作

src/views/user/record/list.vue

@@ -118,15 +118,15 @@
         </div>
       </div>
       <!-- 关键词列表 -->
-      <el-table v-loading="isLoading" :data="list" border style="width:100%;">
-        <el-table-column prop="ip" label="IP" align="center" width="80" />
-        <el-table-column prop="region" label="地区" align="center" width="100" />
-        <el-table-column prop="accessClient" label="访问客户端" align="center" width="70">
+      <el-table v-loading="isLoading" :data="list" border style="width:100%;" :height="tableHeight">
+        <el-table-column prop="ip" fixed label="IP" align="center" width="80" />
+        <el-table-column prop="region" fixed label="地区" align="center" width="100" />
+        <el-table-column prop="accessClient" fixed label="访问客户端" align="center" width="70">
           <template slot-scope="{ row }">
             {{ row.accessClient | accessClientFilters }}
           </template>
         </el-table-column>
-        <el-table-column prop="companyType" label="公司类型" align="center" width="70">
+        <el-table-column prop="companyType" fixed label="公司类型" align="center" width="70">
           <template slot-scope="{ row }">
             {{ row.companyType | companyTypeFilters }}
           </template>
@@ -193,7 +193,7 @@
         <el-table-column prop="accessDuration" label="总时长" align="center" width="80" />
         <el-table-column prop="accessDate" label="访问日期" align="center" width="100" />
         <el-table-column prop="lastAccessTime" label="最后访问时间" align="center" width="100" />
-        <el-table-column label="操作" align="center" width="120">
+        <el-table-column fixed="right" label="操作" align="center" width="120">
           <template slot-scope="{ row }">
             <el-button type="primary" size="mini" @click="handleRecordDetail(row)">查看详情</el-button>
           </template>
@@ -324,16 +324,46 @@ export default {
       supplierList: [], // 关联供应商列表
       tagsOptions: [],
       tagsList: [],
-      tabsCurrent: 0
+      tabsCurrent: 0,
+      tableHeight: window.innerHeight - 120, // 表格动态高度
+      screenHeight: window.innerHeight // 内容区域高度
     }
   },
   computed: {
 
+  },
+  watch: {
+    // 监听screenHeight从而改变table的高度
+    screenHeight(val) {
+      this.screenHeight = val
+      this.tableHeight = this.screenHeight - 260
+    }
   },
   created() {
+    this.getHeigth()
     this.getList()
   },
+  mounted: function() {
+    // window.onresize:浏览器尺寸变化响应事件
+    window.onresize = () => {
+      return (() => {
+        // window.innerHeight:浏览器的可用高度
+        window.screenHeight = window.innerHeight
+        this.screenHeight = window.screenHeight
+      })()
+    }
+  },
   methods: {
+    // 根据不同设备设置表格高度
+    getHeigth() {
+      const windowWidth = document.documentElement.clientWidth
+      if (windowWidth > 1200) {
+        this.tableheight = 900
+      } else {
+        this.tableheight = 500
+      }
+      console.log('tabheight', this.tableheight)
+    },
     // tab切换
     handleClick(tab, event) {
       if (tab.name === 'first') {