element-ui的使用(五)

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

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

element-ui的使用(五)_第1张图片

1.Breadcrump面包屑

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

image.png

    
      首页
      用户管理
      用户列表
    

2.Card面板

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

3.Input和Button

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

 

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

image.png

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

 
   
 

3.还有一个知识点就是,用户在文本框输入内容,查询出结果后,应该在文本框中加入一个小的叉号,点击叉号,服务器重新获取用户列表

image.png

Input组件默认自带的属性clearable以及对应的点击事件clear,每次用户输入内容后,在文本框尾部会自动出现一个叉号,服务器会重新返回数据

4.Table表格

Table是项目中经常需要使用到的,种类有很多种,它的很多属性我们需要记住

  • data是整个表格的数据源,绑定在el-table上,需要我们预先定义好数据源,一般是将从接口获取的数据定义成数据源,如下所示,userInfo就是数据源

    const {data:res}=this.$http.get("users")
    this.userInfo=res.data.users
  • border经常使用到,因为默认的表格是没有border的,我们需要加上
  • 其余属性的后续补充完善

image.png

TableColumn的属性

1.type=“index”

element-ui的使用(五)_第2张图片

   

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

2.prop属性

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

element-ui的使用(五)_第3张图片

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

   

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

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

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

element-ui的使用(五)_第4张图片

 
   
  
  // 切换用户状态
  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组件中的重点!项目中用到分页器的地方太多了。

image.png

 
 

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

你可能感兴趣的:(element-ui)