vue电商后台管理系统--用户列表篇1

用户列表区域

面包屑导航和搜索框

<el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

 <!-- 搜索与添加区 -->
      <el-row :gutter="20">
        <!-- gutter表示row中两个col的间距有20px，span栅格表示col的占比（总共24） -->
        <el-col :span="8">
      <!-- 下边的input和button可谓固定格式;clearable出现搜索框中小叉号;clear配合clearable,
      即点叉号清除输入的内容后重恢复全部内容；此处直接调用getUserList即可查询,用再写js来查询（vue的方便之处） -->
          <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="addDialog">添加用户</el