获取用户列表数据并渲染

最新推荐文章于 2022-10-09 17:06:17 发布
最新推荐文章于 2022-10-09 17:06:17 发布
阅读量310 收藏
点赞数
分类专栏： 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44269412/article/details/116496885
版权

获取用户列表数据

创建用户列表组件时就获取数据，在create中定义getUserList，method中实现方法，获取用户列表的参数对象在data中定义，将获取的数据保存在data定义的userlist和total中

export default {
  // 当前组件私有数据
  data() {
    return {
      // 获取用户列表的参数对象
      queryInfo: {
        query: "",
        pagenum: "1",
        pagesize: "2",
      },
      userlist: [],
      total: 0,
    };
  },
  // 生命周期函数
  created() {
    this.getUserList();
  },
  // 事件处理函数
  methods: {
    async getUserList() {
      const { data: res } = await this.$http.get("users", {
        params: this.queryInfo,
      });
      if (res.meta.status !== 200)
        return this.$message.error("获取用户列表失败！ ");
      this.userlist = res.data.users;
      this.total = res.data.total;
      console.log(res);
    },
  },
};

渲染用户列表数据

在页面结构中加入Table结构
当el-table元素中注入data对象el-table-column数组后，在中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。

 <!-- 用户列表区域 -->
      <!-- 带边框表格用border属性stripe属性可以创建带斑马纹(隔行变色)的表格, -->
      <el-table :data="userlist" border stripe>
        <el-table-column prop="username" label="姓名"> </el-table-column>
        <el-table-column prop="email" label="邮箱"> </el-table-column>
        <el-table-column prop="mobile" label="电话"> </el-table-column>
        <el-table-column prop="role_name" label="角色"> </el-table-column>
        <el-table-column prop="mg_state" label="状态"> </el-table-column>
        <el-table-column label="操作"> </el-table-column>
      </el-table>
wmt-xbyg
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
sql：获取user所有信息
chijiangyuan1166的博客
08-20 585
表结构 需求 取出除了超级管理员以外所有的用户信息，包括所属单位名称和角色列表，多个角色用逗号（,）隔开。 思路 先利用case/when语句根据unit_type类型的值获取用户所属的单位名称，再连接角色表获取每个用户所有的角色，在通过group by语句和group_c...
php读取用户字段信息,PHP列表一次性读取字段信息
weixin_39937524的博客
03-09 147
/***取回一个相关数组,第一个字段值为码,第二个字段为值*@paramint$field要寻找的两个字段*@paramarray$where查询条件*@returnarray*/publicfunctionfetchPairs($field,$where=array()){$where['terminalId']=get_terminalId();$re...
获取用户列表数据
weixin_60771648的博客
04-15 473
① created 生命周期函数 created() { this.getUserList() }, ② 在 methods中 定义 getUserList()函数 async getUserList(){ const { data:res } = await this.$http.get('user',{ params: this.queryInfo }) if (res.meta.status !== 200){
六、用户列表
sunnnnh的博客
03-21 5397
（1）通过路由的形式展示用户列表组件 1. 创建Users组件 2. 并添加/users路由，将其作为home的子路由 3. 效果图 （2）在Session Storage 中保存左侧菜单的激活状态 实现点击菜单按钮时，使该菜单文字高亮显示。对当前页面刷新后，也是高亮显示 1. 通过在el-menu标签中添加属性default-active，并为其赋值需要高亮显示的路径 例如：default-active="/users"，则为用户列表添加高亮显示 ..
Vue如何获取数据列表展示
10-15
在Vue.js中，获取并展示数据列表是一项基本操作，它涉及到数据绑定、组件化、以及异步数据处理等核心概念。下面将详细讲解如何在Vue中实现数据列表的获取与展示，以本例中从GitHub API获取Vue.js提交数据为例。 1. ...
layui使用表格渲染获取行数据的例子
10-16
在本文中，我们将深入探讨如何在layui框架中使用表格渲染并获取行数据。layui是一个流行的前端组件库，提供了丰富的UI组件，包括表格。在实际应用中，我们常常需要在表格中展示数据，并在用户交互时获取选中行的数据...
解决echarts数据二次渲染不成功的问题
10-15
下面是一个简单的示例，展示了如何在Vue.js应用中使用ECharts进行数据渲染： ```javascript export default { data() { return { e2data1: [], e2data2: [], }; }, mounted() { this.drawLine(); }, ...
解决vue2.x中数据渲染以及vuex缓存的问题
08-30
通过这种方式，我们可以解决 Vue2.x 中数据渲染和 Vuex 缓存的问题，提高用户体验。 结语 解决 Vue2.x 中数据渲染和 Vuex 缓存的问题需要我们细心观察和思考。通过使用 `v-if` 和 `Vuex` 的参数 `status`，我们...
ThinkPHP写数组插入与获取最新插入数据ID实例
10-25
本实例将详细讲解如何在ThinkPHP中利用数组进行数据插入，并获取最新插入数据的ID。 首先，数组插入是数据库操作中常见的一种方式，特别是在处理批量数据或者多字段数据时。在ThinkPHP中，我们可以创建一个数组，将...
nodejs 学习日记2 —— get与post请求参数查询
Marshall98的博客
05-05 2090
node.js中get与post请求的参数查询
vue基础学习总结---用户列表案例
qq_61950936的博客
08-23 776
这篇文章介绍 vue学习总结案例：用户列表案例。本文详细记录了所有步骤，拿来学习是真不错！用到的知识点：vue-cli 创建 vue2 项目；element ui 组件库；axios 拦截器；proxy 跨域接口代理；vuer-router 路由；看完不会你打我。哈哈哈，开玩笑的，不多说，上刺刀！！
vue 用户列表，请求接口中数据并渲染页面，分页
m0_58017645的博客
07-13 2321
参考：https://www.bilibili.com/video/BV15y4y1B7gA?p=35&spm_id_from=pageDriver 用户列表-渲染数据-一般数据 1.接口请求数据格式，get方式，传入参数：page,rows 2.初始化定义变量 3.联调接口 // 1.created() // 2.methods: 发送请求 // 3.接口文档中除了登录之外的所有请求都需要进行授权--设置请...
[Vue]列表渲染
emmmm.....
10-09 2513
1. 列表渲染 1.1 v-for 1.2 v-for 中的索引 2. v-for 遍历数组 3. v-for 遍历对象 4. v-for 遍历字符串 5. v-for 遍历指定次数 6. key的作用与原理 6.1 key 6.2 key错误演示 6.2.1 index作为key 6.2.2 不写key 6.2.3 出现错误的解释 6.3 可以对数组数据进行唯一标识的作为key 6.3.1 示例 6.3.2 解释 6.4 key的作用 6.5 用index作为key可能会引发的问题 6.6 开发中如何选择
js通过AJAX获取后台数据渲染到页面
热门推荐
qq_44777678的博客
06-02 1万+
1.GET获取数据 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AJAX发送GET请求并传递参数</title> </head> <body> <ul id="list"&gt...
添加用户功能的实现
xzy的博客
05-04 4660
文章目录添加用户功能的实现需求给添加用户按钮绑定单击事件添加用户的对话框的效果和代码添加用户对话框需要用到的UserList.vue组件中的数据UserList.vue组件中的addUser方法getUserList方法UserList.vue组件中的分页数据SpringBoot后端控制器中接收pageuser请求的方法getUserList动态代理接口UserDao中的getAllUser方法UserDao.xml映射文件中的sql语句addUser方法中执行完getUserList方法之后，会把查询到的
element-ui 使用table控件绑定的list数据的坑
lxlmycsdnfree的博客
02-01 7500
在table绑定list 数据之后，在属性中再次动态的添加成员属性的时候，就会无效。 比如table中绑定了list 中每一个成员的属性age,但是第一次绑定的时候没有age属性，后面获取age数据的时候，再次向list中每一个对象中添加age属性，那么此时不会刷新table数据，table不会再次索取新字段age数据。 解决方式：先等到age数据获取到之后，加到list中每一个对象中，然后再...
一起学Vue之列表渲染
whyrookie的博客
08-14 133
在Vue开发中，列表数据绑定非常简单易用，本文主要通过一些简单的小例子，讲述v-for的使用方法，仅供学习分享使用，如有不足之处，还请指正。 用 v-for 把一个数组对应为一组元素 我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。如下所示： 1 <ul> 2 <li v-for="fruit in fruits"&g...
servlet+jsp+jdbc实现从数据库查询用户信息到页面
weixin_30500663的博客
11-28 692
工程创建这里就不在累述了，直接从显示User信息列表开始。 备注：我用的是servlet3的注解功能实现的，所以不需要配置web.xml 这是我的工程目录： 首先我们创建实体类： public class User implements Serializable{ private static final long serialVersionUID = 1L; public...
vue3 ts vite 获取列表数据渲染到表格 举例
最新发布
05-13
好的，我可以给你提供一个简单的示例。 首先，你需要在项目中安装 Vue 3、TypeScript 和 Vite，可以使用以下命令： ``` npm install vue@next vue-router@next @types/vue @types/vue-router -S npm install vite -D ``` 接着，在 src 目录下创建一个 components 目录，用于存放组件。在 components 目录下创建一个名为 Table.vue 的文件，用于渲染表格。示例代码如下： ```vue <template> <table> <thead> <tr> <th v-for="column in columns" :key="column.field">{{ column.title }}</th> </tr> </thead> <tbody> <tr v-for="item in items" :key="item.id"> <td v-for="column in columns" :key="column.field">{{ item[column.field] }}</td> </tr> </tbody> </table> </template> <script lang="ts"> import { defineComponent } from 'vue' interface Column { field: string title: string } interface Item { id: number name: string age: number } export default defineComponent({ name: 'Table', props: { columns: { type: Array as () => Column[], required: true, }, items: { type: Array as () => Item[], required: true, }, }, }) </script> ``` 在组件中，我们定义了两个接口，Column 和 Item，分别表示表格的列和数据项。在 props 中声明了 columns 和 items，用于接收传入的列和数据。在模板中，使用 v-for 渲染表头和表格内容。 接下来，在 src 目录下创建一个名为 api.ts 的文件，用于模拟请求数据。示例代码如下： ```ts interface Response<T> { code: number data: T } interface User { id: number name: string age: number } const userList: User[] = [ { id: 1, name: '张三', age: 20 }, { id: 2, name: '李四', age: 22 }, { id: 3, name: '王五', age: 25 }, ] export function getUserList(): Promise<Response<User[]>> { return new Promise((resolve) => { setTimeout(() => { resolve({ code: 0, data: userList }) }, 1000) }) } ``` 在 api.ts 中，我们定义了一个 getUserList 函数，用于模拟请求用户列表数据。该函数返回一个 Promise，用于异步获取数据。 最后，在 src 目录下创建一个名为 App.vue 的文件，用于渲染页面。示例代码如下： ```vue <template> <div> <Table :columns="columns" :items="items" /> </div> </template> <script lang="ts"> import { defineComponent, ref, onMounted } from 'vue' import { getUserList } from './api' import Table from './components/Table.vue' export default defineComponent({ name: 'App', components: { Table }, setup() { const columns = [ { field: 'id', title: 'ID' }, { field: 'name', title: '姓名' }, { field: 'age', title: '年龄' }, ] const items = ref([]) onMounted(async () => { const response = await getUserList() items.value = response.data }) return { columns, items, } }, }) </script> ``` 在 App.vue 中，我们引入了 Table 组件，并在模板中使用 props 将列和数据传递给表格组件。在 setup 中，我们使用 ref 创建了一个 items 变量，用于存储用户列表数据。在 onMounted 生命周期钩子中，使用 async/await 异步获取数据，并将数据赋值给 items 变量。 这样，我们就完成了一个简单的 Vue 3 + TypeScript + Vite 的获取列表数据渲染到表格的示例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值