Vue+Element-UI 开发电商管理系统旅行记(三)

用户列表页面

1.添加面包屑导航

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

2.添加搜索框和添加用户按钮

<el-input placeholder="请输入内容" v-model="query" class="searchInput">
		<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>

3.添加表格和分页

el-table > el-table-column

el-table:整个表格  通过注入data属性添加数据源
el-table-column:表格列  通过添加prop指定渲染哪个属性的值

例如：
 <el-table :data="tableData" class="user_table" border style="width: 100%">
     <el-table-column type="index" label="#" width="40"></el-table-column>
     <el-table-column prop="date" label="姓名" width="180"></el-table-column>
     <el-table-column prop="address" label="邮箱"></el-table-column>
     <el-table-column prop="address" label="电话"></el-table-column>
     <el-table-column prop="address" label="角色"></el-table-column>
     <el-table-column prop="address" label="状态"></el-table-column>
     <el-table-column prop="address" label="操作"></el-table-column>
 </el-table>

4.表格数据渲染

//单页面请求接口，未封装
1.const token=localStorage.getItem('token');
2.配置头信息，在封装的request请求中去写
  this.$http.defaults.headers['Authorization']=token
3.this.$http({
           method:'get',
           url:'/users',
           params:this.pageinfo
})

axios通过params来向后台传递参数

如果是post请求：
this.$http({
  method:'post',
  url:'/users',
  data:this.pageinfo
})

5.定义全局过滤器对返回的数据格式经行二次处理，例如注册时间

• 安装日期插件

npm i moment --save
moment.locale(‘zh-cn’) //设置中文
moment(t).format(“YYYY-MM-DD h:mm:ss a”)
说明：参数t代表要传递的时间戳 例如：“create_time”:1486720211

• 在main.js中创建一个日期的全局过滤器

//Vue.filter('过滤器名',函数)
Vue.filter('date', function (t) {
   return moment(t).format("YYYY-MM-DD h:mm:ss a")
})

• 如果对表格数据进行内部处理再输出，通过在el-table-column中内嵌template,通过slot-scope来指定数据源

 <template slot-scope="scope">
      <span >{{ scope.row.create_time | date }}</span>
  </template>

6.分页

<el-pagination
   @size-change="handleSizeChange"
   @current-change="handleCurrentChange"
   :current-page="pageinfo.pagenum"
   :page-sizes="[100, 200, 300, 400]"
   :page-size="100"
   layout="total, sizes, prev, pager, next, jumper"
   :total="400"
></el-pagination>

说明：
1.@size-change：代表pageSize 改变时会触发
2.@current-change：代表当前页码改变时触发
3.current-page：表示当前页码
4.page-sizes:每页显示n条数据的数组 [2,5,10,15]
5.page-size：默认的每页条数
6. layout：分页的整体布局

  例如："total, sizes, prev, pager, next, jumper"