elementUI 表格和分页器的学习 目录→

初步印象,和bootstrap一样,通过类名控制样式。个人感觉比bootstrap更为简单,但是可能没有bootstrap灵活。


 

表格 Table

    <el-table :data="data" style="width: 100%">
      <el-table-column prop="prop" label="label" width="width">
      </el-table-column>
    </el-table>
  •       表格 el-table 的属性

       data表格组件需要展示的数据---数组类型  

       border 是否带有纵向边框

  •  表格列 el-table-column 的属性

       label   显示的标题 string

       width  对应列的宽度  string

       align   对齐方式  String  left/center/right left

       prop   对应列内容的字段名,也可以使用 property 属性 string

   表格列有一个重要的知识点,Table-column Scoped Slot  表格列的作用域插槽

        举例:因为直接通过prop 展示表格的内容,对于图片url无效,会直接把url当字符串显示在页面上,我们不希望看到这个。

                   解决办法是,作用域插槽,有两个参数 分别为row和$index,row为数据的每条数据,$index为索引值

 

 

          elementUI  表格和分页器的学习  目录→

 

 

 

 




分页器 Pagination(请记住这个单词)

对分页器来说最重要四个属性  当前页,数据总条数,每一页展示的条数,连续页码数。对应的属性为分别为current-page,total,page-sizes,pager-count

elementUI的分页器十分简便,常用属性。以下为代码片段输出的代码

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[10, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>
  • 分页器常用属性

其中需要注意的是分页器的排版通过layout来控制,通过控制layout中的属性名顺序来自己定义分页器布局,符号->代表符号右边的内容置于最右边

分页器的居中,style内联标签 通过 text-Align:center 来实现

elementUI  表格和分页器的学习  目录→

  •  分页器事件

 

 

 以下 为两个分页器的点击事件

      @size-change="handleSizeChange"     size-change pageSize  点击时会改变每页条数并跳转(并不会自己跳转,需手动写代码,重新请求分页数据数据)       @current-change="handleCurrentChange"     current-change  currentPage    点击改变当前页并跳转(并不会自己跳转,需手动写代码,重新请求分页数据数据)

 

上一篇:Angular Change Detection 的学习笔记


下一篇:RabbitMQ四种交换机类型