电商用户列表

最新推荐文章于 2024-07-05 13:24:56 发布

行走的小龙

最新推荐文章于 2024-07-05 13:24:56 发布

阅读量215

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_47236535/article/details/110395008

版权

一.用户列表的增删改查+分页

1.用户列表的el-table渲染流程

  <template>
    <el-table stripe style="width: 100%" border :data="userList">
      <el-table-column prop="id" label="#" width="100"></el-table-column>
      <el-table-column prop="username" label="姓名"></el-table-column>
      <el-table-column prop="email" label="邮箱" width="200"></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 label="状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.mg_state"
            active-color="#13ce66"
            inactive-color="red"
            @change="userStateChanged(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- 修改按钮 -->
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="showEditDialog(scope.row)"
          ></el-button>
          <!-- 删除按钮 -->
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="removeUser(scope.row.id)"
          ></el-button>
          <!-- 分配角色 -->
          <el-button
            type="warning"
            icon="el-icon-star-off"
            size="mini"
            @click="setRole(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </template>
  <!-- 用户户列表结束-->

在data中绑定一个userlist空数组 ,在el-table绑定:data=“数组名”，然后在每一列上绑定prop对应的属性值
然后通过this.$axiso.get(“接口”) 接受返回来的数据，判断他的状态值是否等于200，就把返回来的数据赋值到你在data定义的数组中，从而实现渲染用户列表的数据

2.用户列表添加

 <el-dialog title="添加用户" :visible.sync="dialogVisible" width="50%" @close="addDialogClosed">
        <!-- 内容主题曲 -->
        <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="addForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="addForm.password"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="addForm.email"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="addForm.mobile"></el-input>
          </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="adduser">确 定</el-button>
        </span>
      </el-dialog>

首先在element-ui上复制弹框，在data中定义一个变量来控制添加弹框的显示或者隐藏，默认给他false 在最外层绑定这个变量，当点击添加按钮的时候把这个变量设置为true 在data中定义一个对象里面存放着你要提交的数据，然后在form表单用:model来绑定这个对象，把每一列上的用v-model来绑定你在data对象中定义的数据。
在确定添加按钮上绑定一个事件，然后通过this.$axios.post(“接口”)，判断他的状态值是否等于200，如果等于200 就把控制弹框设置为false，提示用户添加成功，否则就提示用户添加失败

3.用户列表的修改流程