更新 分页表格 卢浩然

src/views/haomo/components/tabsTable/HmTabsTable.vue

+<template>
+  <el-tabs v-model="activeName" @tab-click="handleClick"  type="card">
+    <el-tab-pane :label="item.name" :name="item.type + ''" v-for="item in tabTitles">
+      <el-table
+        :data="dataList[item.type]"
+        style="width: 100%">
+        <el-table-column
+          prop="id"
+          label="用户ID"
+          width="200">
+        </el-table-column>
+        <el-table-column
+          prop="username"
+          label="用户名称"
+          width="200">
+        </el-table-column>
+        <el-table-column
+        prop="mobile"
+        label="联系电话"
+        width="200">
+        </el-table-column>
+        <el-table-column
+          prop="email"
+          label="邮箱"
+          width="200">
+        </el-table-column>
+        <el-table-column
+          prop="type"
+          label="登录状态"
+          width="200">
+        </el-table-column>
+      </el-table>
+    </el-tab-pane>
+  </el-tabs>
+</template>
+<script>
+  import request from '@/utils/request'
+  import _ from 'lodash'
+
+  export default {
+    name: 'HmTabsTable',
+    extends: {},
+    components: {},
+    mixins: [],
+    props: {
+      schema: {
+        type: Object,
+        require: true
+      },
+      tabTypes: {
+        type: String,
+        require: true
+      },
+      tabTitles: {
+        type: Array,
+        require: true
+      }
+    },
+    data() {
+      return {
+        activeName: '',
+        dataList: []
+      }
+    },
+    methods: {
+      handleClick(tab, event) {
+      },
+      getList() {
+        const self = this
+        request(self.schema.modelUnderscorePlural, {
+          params: {}
+        }).then(resp => {
+          self.dataList['0'] = []
+          self.dataList['1'] = []
+          self.dataList['2'] = []
+          self.dataList['3'] = []
+          self.dataList['4'] = []
+          _.each(resp.data, (item, index) => {
+            switch (item[self.tabTypes]) {
+              case 0:
+                self.dataList['0'].push(item)
+                break
+              case 1:
+                self.dataList['1'].push(item)
+                break
+              case 2:
+                self.dataList['2'].push(item)
+                break
+              case 3:
+                self.dataList['3'].push(item)
+                break
+              case 4:
+                self.dataList['4'].push(item)
+                break
+            }
+          })
+          self.activeNames = '0'
+          console.log(self.dataList[0])
+          console.log(self.dataList[1])
+        })
+      }
+    },
+    created() {
+      this.getList()
+    }
+  }
+</script>

src/views/haomo/components/tabsTable/index.vue

+<template>
+<div class="app-container calendar-list-container">
+  <div class="app-container calendar-list-container">
+     <!--- this is my components-->
+    <!-- <hm-tab :schema="schema['CcHmUser']"></hm-tab> -->
+    <hm-tabs-table :schema="schema['HmUser']" :tabTitles="tabTitles" tabTypes="type"></hm-tabs-table>
+  </div>
+</div>
+</template>
+
+<script>
+  import HmTab from './HmTabsTable.vue'
+  import schema from '../../schemas/hm_org_schema'
+  export default {
+    name: 'HmTabsTableIndex',
+    // 继承其他组件
+    extends: {},
+    // 使用其它组件
+    components: {
+      'hm-tabs-table': HmTab
+    },
+    data() {
+      return {
+        // 传递标签页标题
+        tabTitles: [
+          { name: '未登录用户', type: '0' },
+          { name: '已登录用户', type: '1' },
+          { name: '用户', type: '2' }
+        ]
+      }
+    },
+    computed: {
+    },
+    filters: {
+    },
+    created() {
+      this.schema = schema
+    },
+    methods: {}
+  }
+</script>
+<style scoped>
+</style>