Vue学习笔记-04-电商项目实战Table表格与分页

1.面包屑导航目录

　　新建一个Users.vue作为响应/users请求的component，在router下的index中配置好响应地址。

　　实现路由导航的面包屑目录效果，首先我们去Element-Ui找到对应的地址https://element.eleme.cn/#/zh-CN/component/breadcrumb，然后导入面包屑表头。

 

<!-- 面包屑导航区 -->
<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>

 

　　:to属性是点击该面包屑目录会跳转到的地址。

 

2.Table用户列表

　　紧接着我们在下方添加一个卡片视图card，用卡片视图来承载整个搜索查询和表格视图。搜索框图也可以直接去element-ui找到对应的效果直接拷贝过来。记住所有用到的组件都需要在element.js中按需导入才可使用。

<el-input placeholder="请输入内容" v-model="queryInfo.query" :clearable="true" @clear="getUserList">
　　<el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
</el-input>

　　我们发现这样写完后，真个视图布局不是很美观，我们可以使用el-row和el-col来(layout)实现布局效果。

<el-row :gutter="20">
　　<el-col :span="10">
　　　　<el-input placeholder="请输入内容" v-model="queryInfo.query" :clearable="true" @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">添加用户</el-button>
　　</el-col>
</el-row>

　　两个事件，@clear和@click都是之后添加完table后的属性。v-model是数据的双向绑定，gutter是列与列之间的间隔，span是每一列的长度，可以按需更改。搜索功能的实现我们暂且不着急，首先我们要添加一个能够显示搜索结果的地方。打开element-ui的页面，找到table选项，拷贝基础表格即可，在斑马纹和边框表格里把显示斑马纹和边框的属性copy过来即可。

<el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
</el-table>

　　:data是绑定的具体的数据对象，而这个数据对象使我们从后端发送请求得到的。我们首先要在这个组件被create的时候就调用一个getUserList请求。在method里定义一个getUserList()函数，请求方法为get，请求参数为queryInfo。

 

async getUserList(){
　　const {data:res} = await this.$http.get('users',{ params:this.queryInfo })
　　console.log(res)
　　if(res.meta.status !== 200) return this.$message.error('获取用户信息失败！');
　　this.total = res.data.total
　　this.userList = res.data.users
},

 

　　返回的data更新到userList里，queryInfo，userList和total要在data()里定义。

data(){
　　return{
　　// 获取用户列表的参数对象
　　queryInfo:{
                query: '',
                // 当前页数
                pagenum: 1,
                // 
                pagesize: 2
            },
            userList:[],
            total:0,
        }
    },

　　把这个queryInfo作为param去请求。返回的参数返回到userList内。

 

　　prop是userList的key值名，label是显示在表头上的名称，:data和userList绑定上，即可通过prop来访问对应的数据。先看代码：

<!-- 用户列表区 -->
<el-table :data="userList" :border="true" :stripe="true">
　　<el-table-column label= "#" 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="状态">
　　　　<template slot-scope="scope">
　　　　　　<el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>
　　　　</template>
　　</el-table-column>
　　<el-table-column  label="操作" width="180px">
　　　　<template>
　　　　　　<!-- 修改按钮 -->
　　　　　　<el-tooltip effect="dark" content="修改角色" placement="top" :enterable="false">
　　　　　　　　<el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
　　　　　　</el-tooltip>
　　　　　　<!-- 删除按钮 -->
　　　　　　<el-tooltip effect="dark" content="删除角色" placement="top" :enterable="false">
　　　　　　　　<el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
　　　　　　</el-tooltip>
　　　　　　<!-- 分配角色按钮 -->
　　　　　　<el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
　　　　　　　　<el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
　　　　　　</el-tooltip>
　　　　</template>
　　</el-table-column>
</el-table>

 

3.优化列表区

　　用户状态一栏，我们想要添加一个switch控件实现动态切换用户的状态，这需要用到el-switch的控件，我们在el-table-column下增添一个<template> 添加属性slot-scope="scope"就能用scope.row去访问到表格中的数据对象，如需获取用户的状态，只需要调用scope.row.mg_state即可。然后我们把scope.row.mg_state绑定到switch控件的v-model里，在修改的同时添加@change事件，利用对应的接口把更改后的数据返回到后端数据库中。

 

async userStateChanged(userInfo) {
　　const{data:res} = await this.$http.put(`users/${userInfo.id}/state/${userInfo.mg_state}`)
　　if(res.meta.status !== 200){
　　　　userInfo.mg_state = !userinfo.mg_state
　　　　return this.$message.error("更新用户状态失败！")
　　}
　　this.$message.success('更新用户状态成功！')
}

 

　　注意这里的··符号是反冒号，是ES6里的新语法，告诉这是一个模板字符串，传送的数据是可变的模板。这样的接口发送的数据在后端接收时，如果使用springMVC的话，接收的请求可以是@GetMapping('users/{userId}/state/{state})，通过调用dao层修改数据即可。

　　紧接着，在操作一列内，我们利用el-button添加三个按钮，来控制用户的增删改。(增删改查程序员狂喜)

4.分页

 

<!-- 分页区 -->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
　　:page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination>

 

　　其中的@size-change和@current-change都是事件响应函数，page-sizes是一个数组，可以选择当前页面一页显示多少条数据，两个事件响应函数都会传递参数回去，我们可以在method里定义这两个响应函数：

handleSizeChange(newSize){
　　console.log(newSize)
　　this.queryInfo.pagesize = newSize
　　this.getUserList()
},
// 监听 页码值 改变的事件
handleCurrentChange(newPage){
　　console.log(newPage)
　　this.queryInfo.pagenum = newPage
　　this.getUserList()
}

　　每次发生改变后，都重新调用getUserList()刷新页面。