会员管理系统PC端教程（二）

上篇回顾

我们上一篇实现了首页，主要是按照官方的模板修改成我们自己需要的页面，页面效果如下

在这里插入图片描述

为了实现会员信息列表可以点击，需要创建一个新的页面

创建会员列表页面

打开编辑器，切换到页面管理，点击创建新页面

在这里插入图片描述

录入页面标题和页面id

在这里插入图片描述

点击确定按钮，页面就创建好了

在这里插入图片描述

页面搭建

我们要实现的效果是页面有查询条件，在查询条件下边有表格，可以显示多条的会员信息。这个时候就需要使用PC端的组件库了，点击组件菜单，切换到组件视图。

在这里插入图片描述

在组件库列表那切换到PC端的组件库

在这里插入图片描述

PC端的组件库比移动端更复杂，值得我们好好研究，当然想要掌握组件的用法最好的办法就是练。计算机作为一项技能只有在不断的练的过程中才可以提高。

在这里插入图片描述

我们首先是需要一个内容结构的组件

在这里插入图片描述

这个组件的效果是可以显示当前模块的名称，里边可以放置具体的内容

在这里插入图片描述

先修改一下标题，标题改为会员信息列表

在这里插入图片描述

说明文字我们暂时不需要，把里边的文字清除掉。把显示返回按钮的配置打开，这样页面就多了一个小箭头用来返回

在这里插入图片描述

现在点击返回按钮是没有任何效果的，需要给返回按钮添加一个点击的事件，我们返回到工作台的页面就可以

在这里插入图片描述

表格内容的实现

导航条功能制作好后，我们就需要添加表格，首先选中内容结构里的childrenSlolt

在这里插入图片描述

然后添加表格模板组件

在这里插入图片描述

表格组件添加进来后先需要绑定数据源，我们绑定我们的会员信息数据源即可

在这里插入图片描述

可能新阅读的同学还没有创建数据源，在数据源管理里新建即可

在这里插入图片描述

在这里插入图片描述

当选好数据源默认是将字段都添加到表头里，表格一般不需要把信息都显示，只列出关键信息即可，为了后续好修改，我们定义一个变量用来配置表头的字段。

点击变量管理，创建一个新的变量header，类型的话选择数组

在这里插入图片描述

在这里插入图片描述

默认值设置为如下的值

代码语言：txt复制

[
  {
    "key": "name",
    "header": "姓名"
  },
  {
    "key": "phone",
    "header": "电话"
  },
  {
    "key": "account",
    "header": "余额"
  },
  {
    "key": "createdAt",
    "header": "创建时间"
  },
  {
    "key": "opera",
    "header": "操作",
    "cellType": "slot"
  }
]

变量设置好后我们需要进行数据绑定，点击表头配置旁边的超链接图标，然后选中刚创建的变量即可

在这里插入图片描述

在这里插入图片描述

添加好后表格内容就变了，显示了我们刚刚设置的表头

在这里插入图片描述

表头定义好后，就需要定义查询条件，这里边叫搜索内容。也是先创建一个变量searchMap，类型的话选择数组

在这里插入图片描述

默认值设置成如下

代码语言：txt复制

[
  {
    "text": "姓名",
    "value": "name"
  },
  {
    "text": "电话",
    "value": "phone"
  }
]

变量添加好后就需要绑定

在这里插入图片描述

这样表格我们基本上就配置好了

按钮配置

表格设置好后我们就需要配置按钮，先配置新增的按钮，在表格上方。在表格模板组件选中leftSlot插槽

在这里插入图片描述

里边添加一个按钮，修改一下按钮的标题

在这里插入图片描述

然后在recordSlot插槽中添加一个容器，增加两个按钮，分别修改为删除和修改

在这里插入图片描述

这样就配置好了，列表页面配置好后我们回到工作台的页面将跳转页面设置成我们刚刚新增的页面

在这里插入图片描述

预览

一切设置好后我们点击一下预览按钮看看效果

在这里插入图片描述

预览后发现无法读取数据，测试了一下如果直接复用平台加的分页方法是不行，得自己写分页方法。后续还得仔细研究了。

微搭低代码

0 人点赞