Ant Design Pro of Vue记录

最新推荐文章于 2025-03-27 14:25:19 发布

palapple163

最新推荐文章于 2025-03-27 14:25:19 发布

阅读量858

点赞数 1

本文链接：https://blog.youkuaiyun.com/palapple163/article/details/101761841

版权

Ant Design Pro of Vue记录

Antd本身是基于React，而Vue版本是移植过来的，大致就移植了90%的功能，而其中的路由配置，权限配置，都是可以在router.config.js进行配置；
整个项目的框架
```
- Dashboard
  - 分析页
  - 监控页
  - 工作台
- 表单页
  - 基础表单页
  - 分步表单页
  - 高级表单页
- 列表页
  - 查询表格
  - 标准列表
  - 卡片列表
  - 搜索列表（项目/应用/文章）
- 详情页
  - 基础详情页
  - 高级详情页
- 结果
  - 成功页
  - 失败页
- 异常
  - 403 无权限
  - 404 找不到
  - 500 服务器出错
- 个人页
  - 个人中心
  - 个人设置
- 帐户
  - 登录
  - 注册
  - 注册成功
```
在官网上是可以得到大致的框架说明：

Ant Design Pro of Vue：https://pro.loacg.com/docs/getting-started

根据需求，你可以在不同页面里面得到大致的模板，然后你就可以微调，根据需求进行调配
1. Antd pro 里面是配合着Ant Design 组件库进行使用的，组件中的具体api可以在
Ant Design：https://vue.ant.design/docs/vue/introduce-cn/

针对组件的属性进行调整
1. 就例如s-table组件为例，基本难点包括：数据加载loaddata，列表头的设置，api的设置，查询query的设置，初始化表格，重置表格等等

个人觉得几个难点：

表头的设置，title，主要是dataIndex，这个属性你要跟api返回的数据的对象的属性值一致，才能展示数据；
loadDate，Antd Pro的sTable数据加载是封装好的，不需要再写数据加载的方法，而loadData的写法是promiser，有固定写法。 then的回调函数中，需要注意看一下后台api的json格式，框架默认加载的是 result下的data属性，如果你json不是data属性，而是其他的等等，你要提前转一下转化，框架才能识别，（例如：res.result.data = res.result.listOprLog;）
查询功能，查询按钮使用了双向数据绑定v-model，把输入的数据暂时存储在queryParam中一个属性，动态生成，再按下查询的按钮的时候，绑定一个方法；首先需要开启一个table中的localLoading，然后，把queryParam这个对象的属性值都加载进去，然后回调，将 this.$refs.table.localDataSource = r.data ，将得到的数据重新加载到table之中，最后关闭localLoading，需要注意的是，查询的属性值，你要提前看看api已经写好了有什么，不然stable不会返回对应的值，因为api没有开放端口。
整个sTable中很多功能都是封装好的，例如refresh功能，

refreshTable () {
   
      this.$refs.table.clearSelected()
      this.$refs.table.refresh()
      if (this.$refs.table.localDataSource.length > 0) {
    this.$message.info(`刷新成功!`) }
    }
//步骤，1.清除已选项；2.table进行重置；3.如果获取的数据有，弹窗进行说明

还有自动分页系统，返回的数据中带有分页页码，sTable中就可以自动带有分页功能，在sTable中的属性值可以设定showPagination=“auto”，同时它对服务器的请求也是按照分页进行的，例如在查询的时候，得到多条数据，只会加载一个页面的数据，但是在第一次请求中，就会得到total条数，（底部栏会显示所有条数，但是不会加载数据），当你点击第二页的时候，你才会发送请求，所以是已经封装好的请求机制。

      <template>
        <a-card :bordered="false">
          <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="48">
                  <a-col :md="6" :sm="24">
                    <a-form-item label="日志名称">
                      <a-input v-model="queryParam.startDate" style="width: 100%"/>
                    </a-form-item>
                  </a-col>
                  <a-col :md="6" :sm="24">
                    <a-form-item label="日志信息">
                      <a-input v-model="queryParam.endData" style="width: 100%"/>
                    </a-form-item>
                  </a-col>
                <a-col :md="!advanced && 6 || 24" :sm="24">
                  <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                    <a-button type="primary" @click="queryData()">查询</a-button>
                    <!-- 下面相当于function(){
   queryParam={
   }; return queryParam;} -->
                    <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
      
          <div class="table-operator">
            <!--

最低0.47元/天解锁文章