提交代码

vue-demo/src/views/system/user.vue

+<template>
+  <v-data-table
+    :headers="headers"
+    :items="dataLst"
+    :options.sync="options"
+    :server-items-length="totalLength"
+    :loading="loading"
+  ></v-data-table>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      headers: [
+        {
+          text: 'UserName',
+          value: 'username'
+        },
+        {
+          text: 'Sex',
+          value: 'sex'
+        }
+      ],
+      totalLength: 0,
+      dataLst: [],
+      options: {},
+      loading: true
+    }
+  },
+  methods: {
+    getDataFromApi () {
+      this.loading = true
+      this.callApi().then(data => {
+        this.totalLength = data.totalLength
+        this.dataLst = data.dataLst
+        this.loading = false
+      })
+    },
+    callApi () {
+      return new Promise((resolve, reject) => {
+        const { sortBy, sortDesc, page, curPage } = this.options
+        let dataLst = this.getTempData()
+        const totalLength = dataLst.length
+        if (sortBy.length === 1 && sortDesc.length === 1) {
+          dataLst = dataLst.sort((a, b) => {
+            const sortA = a[sortBy[0]]
+            const sortB = a[sortBy[0]]
+            if (sortDesc[0]) {
+              if (sortA < sortB) {
+                return 1
+              } else if (sortA > sortB) {
+                return -1
+              } else {
+                return 0
+              }
+            } else {
+              if (sortA > sortB) {
+                return 1
+              } else if (sortA < sortB) {
+                return -1
+              } else {
+                return 0
+              }
+            }
+          })
+        }
+        if (curPage > 0) {
+          dataLst = dataLst.slice((page - 1) * curPage, page * curPage)
+        }
+
+        setTimeout(() => {
+          resolve({
+            dataLst,
+            totalLength
+          })
+        }, 1000)
+      })
+    }
+  }
+}
+</script>