element-ui的使用（五）

今天就开始对用户列表（users）进行详细说明

用户列表大概由这几个element组件构成：Breadcrump（面包屑）、Card（面板）、Input（输入框）、Button（按钮）、Tooltip（文字提示）、Table（表格）、Pagination（分页器）

1.Breadcrump面包屑

Breadcrump主要是位于页面的底部，起到一个目录提示的作用,面包屑的分隔符主要是两种：默认斜杠分隔或者图标分隔；其次需要注意的就是面包屑中的文字可以自定义路径去跳转，比如我这里的首页，点击后直接跳转到首页

    <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>

2.Card面板

Card面板在这里的主要作用就是包裹整个主题组件，突出主题

3.Input和Button

我们由Input和Button组成搜索框，这里面有几个重点需要注意：
1.Input输入框尾部的搜索按钮是如何加上去的?
直接在Input内加上以下代码，即可

 <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>

2.在本项目中，我们需要在文本框中输入关键词，点击搜索按钮，下方的Table表格就会呈现我们搜索筛选后的数据

我们结合Inpue的v-model，将用户输入的内容，双向绑定到userInfo内的query字段中，然后为搜索按钮绑定事件，也就是重新获取用户列表数据，但是此时携带了用户输入query字段，因此，后端服务器为我们处理了数据，返回的是筛选后的内容

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

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”

  <el-table-column type="index" label="#" width="48"> </el-table-column>

我们在使用表格时，经常会为不同的数据做排序，其实TableColumn有一个type属性决定了对应列的类型，我们可以设置成type="index"，然后这一列就会自动的为数据排序，很方便，经常会使用到的

2.prop属性

个人认为prop属性是比较重要的一个，主要用来获取我们Table中data数据源的每个具体列的字段名，

比如说姓名字段，我们把从后台返回的数据放在了userInfo这个数组中，其中的username字段对应的就是姓名这一列的数据,所以我们这样写。

  <el-table-column prop="username" label="姓名"> </el-table-column>

3.¶Table-column Scoped Slot自定义列的内容

需要知道的是，在实际的项目中，每一列对应的不一定全部都是字符串，也有可能是button按钮或者其他什么的，所以就需要我们自定义列的内容

比如这里，我们将这一列变成了Switch开关，用户可以点击切换状态，其中scope.row对应的是这一行的数据对象，所以我们可以根据mg_state的值（true或者false），切换状态

 <el-table-column label="状态">
   <template slot-scope="scope">
     <el-switch v-model="scope.row.mg_state" @change="changeState(scope.row)">
     </el-switch>
   </template>
  </el-table-column>

  // 切换用户状态
  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只是一个字符串，意义不同！

   <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
      <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
   </el-tooltip>

6.Pagination分页器

分页器绝对是element组件中的重点！项目中用到分页器的地方太多了。

 <el-pagination
        @current-change="currentChange"
        @size-change="sizeChange"
        :current-page="paramsInfo.pagenum"
        :page-sizes="[2, 4]"
        :page-size="paramsInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
 </el-pagination>

需要解释以下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()
    },