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 点击改变当前页并跳转(并不会自己跳转,需手动写代码,重新请求分页数据数据)
洗尽铅华始见金,褪去浮华归本真