今天就开始对用户列表（users）进行详细说明用户列表大概由这几个element组件构成：Breadcrump（面包屑）、Card（面板）、Input（输入框）、Button（按钮）、Tooltip（文字提示）、Table（表格）、Pagination（分页器）
文章图片
1.Breadcrump面包屑 Breadcrump主要是位于页面的底部，起到一个目录提示的作用,面包屑的分隔符主要是两种：默认斜杠分隔或者图标分隔；其次需要注意的就是面包屑中的文字可以自定义路径去跳转，比如我这里的首页，点击后直接跳转到首页
文章图片
首页
用户管理
用户列表
2.Card面板 Card面板在这里的主要作用就是包裹整个主题组件，突出主题
3.Input和Button 我们由Input和Button组成搜索框，这里面有几个重点需要注意：
1.Input输入框尾部的搜索按钮是如何加上去的?
直接在Input内加上以下代码，即可
2.在本项目中，我们需要在文本框中输入关键词，点击搜索按钮，下方的Table表格就会呈现我们搜索筛选后的数据
文章图片
我们结合Inpue的v-model，将用户输入的内容，双向绑定到userInfo内的query字段中，然后为搜索按钮绑定事件，也就是重新获取用户列表数据，但是此时携带了用户输入query字段，因此，后端服务器为我们处理了数据，返回的是筛选后的内容
3.还有一个知识点就是，用户在文本框输入内容,查询出结果后，应该在文本框中加入一个小的叉号，点击叉号，服务器重新获取用户列表
文章图片
Input组件默认自带的属性
clearable以及对应的点击事件clear,每次用户输入内容后，在文本框尾部会自动出现一个叉号，服务器会重新返回数据4.Table表格 Table是项目中经常需要使用到的，种类有很多种，它的很多属性我们需要记住
data是整个表格的数据源，绑定在el-table上，需要我们预先定义好数据源，一般是将从接口获取的数据定义成数据源,如下所示,userInfo就是数据源
const {data:res}=this.$http.get("users") this.userInfo=res.data.users
border经常使用到，因为默认的表格是没有border的，我们需要加上- 其余属性的后续补充完善
文章图片
TableColumn的属性
1.type=“index”
文章图片
我们在使用表格时，经常会为不同的数据做排序，其实TableColumn有一个
type属性决定了对应列的类型，我们可以设置成type="index"，然后这一列就会自动的为数据排序，很方便，经常会使用到的2.prop属性
个人认为prop属性是比较重要的一个，主要用来获取我们Table中data数据源的每个具体列的字段名，
文章图片
比如说姓名字段，我们把从后台返回的数据放在了userInfo这个数组中，其中的username字段对应的就是姓名这一列的数据,所以我们这样写。
3.?Table-column Scoped Slot自定义列的内容
需要知道的是，在实际的项目中，每一列对应的不一定全部都是字符串，也有可能是button按钮或者其他什么的，所以就需要我们自定义列的内容
比如这里，我们将这一列变成了Switch开关，用户可以点击切换状态，其中
scope.row对应的是这一行的数据对象，所以我们可以根据mg_state的值（true或者false），切换状态
文章图片
// 切换用户状态
async changeState(userinfo) {
//将新的userinfo传给服务器，修改状态
const {data:res}=await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`)
console.log(res)
if(res.meta.status!==200)
{
//如果服务器相应失败，则对应的修改应该无效，取反
userinfo.mg_state!=userinfo.mg_state
return this.$message.error("修改状态失败")}
this.$message.success("修改状态成功！")
},5.Tootip文字提示 常用于展示鼠标 hover 时的提示信息。
我们这里使用的就是正上边的写法,effect决定了主题颜色，placement决定了Tooltip的出现位置，content就是提示信息的内容，enterable决定了鼠标是否可以进入到 tooltip 中，我这里设置的是false
需要注意的是:enterable="false"的写法是加上了v-bind，是将false作为布尔值，如果没有加上v-bind，就代表false只是一个字符串，意义不同！
6.Pagination分页器 分页器绝对是element组件中的重点！项目中用到分页器的地方太多了。
文章图片
需要解释以下Pagination的几个重要属性
page-size决定了每页显示的条目个数，我这里是根据请求对象中的page-size决定的。好像初始设置的是2page-sizes是每页显示个数选择器的选项设置，一般情况下是一个数组，里面提供了可以选择的几个数字current-page指的是我们当前的页数total指的是总条目数，也就是数据的总个数layout决定了分页器中几个小组间的布局方式，以书写顺序布局
- 【element-ui的使用（五）】
size-change()方法是当page-size改变的时候会触发，也就是当我们切换了每页显示的个数时，触发，size-change()方法会收集到当前最新的page-size，可以动态的传递给服务器，而改变当前的条目数
// sizeChange默认带参数，就是你点击的index sizeChange(index) { this.paramsInfo.pagesize = index this.getUserList() },
current-change()方法就是当我们点击某个页面数的时候触发，会根据我们的点击，动态的切换到相应的页面中去。current-change()方法会收集到当前最新的current-page，可以动态的传递给服务器，而改变当前的页面数
// currentChange默认带参数，就是你点击的index
currentChange(index) {
this.paramsInfo.pagenum = index
this.getUserList()
},
