vben table使用

label/index.vue

<template>
  <div class="wrapper">
    <Search />
    <Tables />
  </div>
</template>

<script setup lang="ts">
  import Search from './search/index.vue';
  import Tables from './tables/index.vue';

  // import { reactive, ref } from 'vue';
</script>

<style scoped lang="scss">
  .wrapper {
    width: 100%;
    height: 100%;
    padding: 10px;
    & > :nth-child(2) {
      margin-top: 15px;
    }
  }
</style>

search/index.vue

<template>
  <div class="w-search">
    <section class="front">
      <span>输入值</span>
      <a-input v-model:value="value" placeholder="Basic usage" />
    </section>
    <section class="back">
      <a-button>查询</a-button>
      <a-button type="primary">搜索</a-button>
    </section>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { getMenuApi } from '../../../../api/demo/label';

  const value = ref<string>('');
  let role = ref('admin');
  const gets = async () => {
    const { data } = await getMenuApi(role.value);
    console.log(data);
  };
  // gets();
</script>

<style scoped lang="scss">
  .w-search {
    // border: 1px solid blue;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    padding: 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .front {
    display: flex;
    align-items: center;
    span {
      white-space: nowrap;
    }
  }
  .back {
    display: flex;
    align-items: center;
  }
</style>

tables/index.vue

<template>
  <div class="w-table">
    <header class="header">
      <a-button type="primary">Primary Button</a-button>
    </header>
    <main class="main">
      <Table :dataSource="dataSource" :columns="columns" :rowClassName="getRowClassName" bordered />
    </main>
  </div>
</template>

<script setup lang="ts">
  import { reactive } from 'vue';
  import { Table } from 'ant-design-vue';

  let dataSource = reactive([
    {
      key: '1',
      name: '胡彦斌',
      age: 32,
      address: '西湖区湖底公园1号',
    },
    {
      key: '2',
      name: '胡彦祖',
      age: 42,
      address: '西湖区湖底公园1号',
    },
  ]);

  let columns = reactive([
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    },
  ]);

  const getRowClassName = (_record: any, index: any): any => {
    // console.log(_record, index);
    return index % 2 == 1 ? 'table-striped' : null;
  };
</script>

<style scoped lang="scss">
  .w-table {
    height: calc(100vh - 150px);
    box-shadow: 0 0 5px rgb(0, 0, 0, 0.1);
    // background-color: aqua;
    padding: 7px;
  }
  .header {
    display: flex;
    height: 45px;
    width: 100%;
    border: 1px solid rgb(0, 0, 0, 0.4);
    margin-bottom: 15px;
  }
  .main {
    flex: 1;
    .table {
      height: 500px;
      width: 100%;
    }
  }

  //表格斑马纹
  // .ant-table-striped :deep(.table-striped) td {
  //   // background-color: #fafafa;
  // }
  ::v-deep .table-striped {
    background-color: #fafafa;
  }
</style>

api/label

import { defHttp } from '/@/utils/http/axios';

enum Api {
  getMenu = '/user/getMenu',
}

export function getMenuApi(params: any): any {
  return defHttp.request({
    url: Api.getMenu,
    method: 'GET',
    params,
  });
}

//获取列表,分页
export const goodsListApi = (data:any) => {
	return http.get(`/goods/goodsList`, { params: {page: data} });
};

范例：api/system.ts

import {
  AccountParams,
  DeptListItem,
  MenuParams,
  RoleParams,
  RolePageParams,
  MenuListGetResultModel,
  DeptListGetResultModel,
  AccountListGetResultModel,
  RolePageListGetResultModel,
  RoleListGetResultModel,
} from './model/systemModel';
import { defHttp } from '/@/utils/http/axios';

enum Api {
  AccountList = '/system/getAccountList',
  IsAccountExist = '/system/accountExist',
  DeptList = '/system/getDeptList',
  setRoleStatus = '/system/setRoleStatus',
  MenuList = '/system/getMenuList',
  RolePageList = '/system/getRoleListByPage',
  GetAllRoleList = '/system/getAllRoleList',
}

export const getAccountList = (params: AccountParams) =>
  defHttp.get<AccountListGetResultModel>({ url: Api.AccountList, params });

export const getDeptList = (params?: DeptListItem) =>
  defHttp.get<DeptListGetResultModel>({ url: Api.DeptList, params });

export const getMenuList = (params?: MenuParams) =>
  defHttp.get<MenuListGetResultModel>({ url: Api.MenuList, params });

export const getRoleListByPage = (params?: RolePageParams) =>
  defHttp.get<RolePageListGetResultModel>({ url: Api.RolePageList, params });

export const getAllRoleList = (params?: RoleParams) =>
  defHttp.get<RoleListGetResultModel>({ url: Api.GetAllRoleList, params });

export const setRoleStatus = (id: number, status: string) =>
  defHttp.post({ url: Api.setRoleStatus, params: { id, status } });

export const isAccountExist = (account: string) =>
  defHttp.post({ url: Api.IsAccountExist, params: { account } }, { errorMessageMode: 'none' });