前端学习之vue+element-ui电商项目（二）用户界面

最新推荐文章于 2023-06-15 01:19:59 发布

shakalaca

最新推荐文章于 2023-06-15 01:19:59 发布

阅读量1.3k

点赞数 1

文章标签： database javascript vue.js elementui

本文链接：https://blog.csdn.net/cathyleeq/article/details/123665937

版权

本文详述了使用Vue.js和Element-UI框架构建电商项目的用户界面过程，包括页面布局、搜索添加功能、用户列表展示、分页及对话框功能的实现，覆盖了界面样式、数据添加和相关方法。

摘要由CSDN通过智能技术生成

0. 准备工作

component下新建文件Users.vue，并在路由中引入文件

1.页面布局

1.1页面框架

在这里插入图片描述

1.2 框架内容

1.2 .1面包屑导航区

<!-- 面包屑导航区 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>用户登录</el-breadcrumb-item>
          <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      </el-breadcrumb>

1.2 .2卡片视图区

在这里插入图片描述

2.搜索与添加

2.1 界面样式

<el-row :gutter="20">
              <el-col :span="8">
                  <el-input placeholder="请输入搜索内容" v-model="queryInfo.query" clearable @clear="getUserList">
                      <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
                  </el-input>
              </el-col>
               <el-col :span="4">
                  <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
              </el-col>
          </el-row>

2.2 数据添加

// 获取用户列表对象参数
      queryInfo: {
   
        query: '',
        // 当前页数
        pagenum: 1,
        // 当前页数显示数据条数
        pagesize: 2
      },
      
      // 控制对话框隐藏与显示
      addDialogVisible: false,

2.3 方法实现

created () {
   
    this.getUserList()
  },
  methods: {
   
    async getUserList () {
   
      const {
    data: result } = await this.$http.get('users', {
   
        params: this.queryInfo
      })
      if (result.meta.status !== 200) return this.$message.error('获取用户列表失败')
      this.userList = result.data.users
      this.total = result.data.total
      // console.log(result)
    },

3.用户列表区

3.1 界面样式

<el-table :data="userList" border stripe>
            <el-table-column type="index" ></el-table-column>
            <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 label="状态">
                <!-- 作用域插槽 会覆盖prop switch开关组件展示状态信息，scope.row就是行内的数据 -->
                <template slot-scope="scope">
                    <el-switch
                    v-model="scope.row.mg_state"
                    @change="userStateChange(scope.row)">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label=</