element-ui的使用（五）

今天就开始对用户列表（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决定的。好像初始设置的是2
page-sizes是每页显示个数选择器的选项设置，一般情况下是一个数组，里面提供了可以选择的几个数字
current-page指的是我们当前的页数
total指的是总条目数，也就是数据的总个数
layout决定了分页器中几个小组间的布局方式，以书写顺序布局

Pagination自带的的两个常用的方法

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()
    },