table

src/api/system/menu.js

@@ -8,16 +8,18 @@ export function save(data) {
   })
 }
 
-export function listmenu() {
-  return request({
-    url: '/api/admin/menu',
-    method: 'get'
-  })
+export function listmenu(isLoading = true,params) {
+  return request({
+    url: '/api/admin/menu',
+    method: 'get',
+    params,
+    isLoading
+  })
 }
-export function del(data) {
-  return request({
-    url: '/api/admin/menu/delete',
-    method: 'post',
-    data
-  })
+export function del(data) {
+  return request({
+    url: '/api/admin/menu/delete',
+    method: 'post',
+    data
+  })
 }

src/views/component/data.js

@@ -0,0 +1,66 @@
+const data = [
+  {
+    id:1,
+    name:'a',
+    age:10,
+    birth:'2022-01-01'
+  },
+  {
+    id:2,
+    name:'b',
+    age:11,
+    birth:'2022-01-01'
+  },
+  {
+    id:3,
+    name:'c',
+    age:14,
+    birth:'2022-01-01'
+  },
+  {
+    id:4,
+    name:'b',
+    age:11,
+    birth:'2022-01-01'
+  },
+  {
+    id:5,
+    name:'e',
+    age:20,
+    birth:'2022-01-02'
+  },
+  {
+    id:6,
+    name:'f',
+    age:20,
+    birth:'2022-01-02'
+  },
+  {
+    id:7,
+    name:'g',
+    age:20,
+    birth:'2022-01-02'
+  },
+  {
+    id:8,
+    name:'h',
+    age:20,
+    birth:'2022-01-02'
+  }
+]
+
+const getData = (params) => {
+  const { page,page_size } = params
+  let start = (page - 1) * page_size
+  let res = data.slice(start,start + page_size)
+  return {
+    per_page:page_size,
+    total:data.length,
+    data:res,
+    current_page:page
+  }
+}
+
+export {
+  getData
+}

src/views/component/table.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="container">
+    <!-- 查询配置 -->
+    <div>
+      <div ref="lxHeader">
+        <LxHeader icon="md-apps" text="管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
+          <div slot="content"></div>
+          <slot>
+            <div>
+              <Button type="primary" style="margin-left: 10px" @click="$refs['xyTable'].getTableData()">查询</Button>
+              <Button type="primary"  style="margin-left: 10px">新增</Button>
+            </div>
+          </slot>
+        </LxHeader>
+      </div>
+    </div>
+
+    <xy-table
+      ref="xyTable"
+      :border="true"
+      :list="[]"
+      :req-opt="{keyword:'123'}"
+      res-prop=""
+      :table-item="table"></xy-table>
+  </div>
+</template>
+
+<script>
+import LxHeader from "@/components/LxHeader/index.vue";
+import { getData } from './data'
+import {listmenu} from '@/api/system/menu'
+export default {
+  components:{
+    LxHeader
+  },
+  data() {
+    return {
+      select:{
+        page:1,
+        page_size:10
+      },
+      list:[],
+      table:[
+        {
+          type:'expand',
+          width:46,
+          expandFn:props => {
+            return (
+              <div>{props.$index}</div>
+            )
+          }
+        },
+        {
+          prop:'id',
+          label:'编号',
+          width:80,
+          sortable: 'custom'
+        },
+        {
+          prop:'name',
+          label:'菜单',
+          width:120,
+          sortable:'custom',
+        },
+        {
+          prop:'url',
+          label:'菜单路径',
+          minWidth:140
+        },
+        {
+          prop:'path',
+          label:'路由',
+          minWidth:140
+        },
+        {
+          prop:'icon',
+          label:'图标',
+          minWidth:100
+        },
+        {
+          prop:'api_prefix',
+          label:'API前缀',
+          minWidth:100
+        },
+        {
+          prop:'sortnumber',
+          label:'排序',
+          width:100,
+          filters:[
+            {
+              text:"0",
+              value:0
+            },
+            {
+              text:"1",
+              value:1
+            }
+          ]
+        },
+      ]
+    }
+  },
+  methods: {
+    listmenu,
+    getList(){
+      this.total = getData(this.select).total
+      this.list = getData(this.select).data
+    }
+  },
+  computed: {},
+  mounted() {
+    this.getList()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>