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

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>