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为索引值

 

 

          

 

 

 

 

---

分页器 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 来实现

•  分页器事件

 

 

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

      @size-change="handleSizeChange"     size-change pageSize  点击时会改变每页条数并跳转（并不会自己跳转，需手动写代码，重新请求分页数据数据）

      @current-change="handleCurrentChange"     current-change  currentPage    点击改变当前页并跳转（并不会自己跳转，需手动写代码，重新请求分页数据数据）