获取用户列表数据并渲染

获取用户列表数据

创建用户列表组件时就获取数据，在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>