- Table 表格组件
用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作
使用:当el-table
元素中注入data
对象数组后,在el-table-column
中用prop
属性来对应对象中的键名即可填入数据,用label
属性来定义表格的列名。可以使用width
属性来定义列宽
- 分页组件
image.png当数据量过多时,使用分页分解数据。
<!-- 分页组件 -->
<!--
background 按钮背景
layout="total,prev, pager, next,jumper" 布局组件,分别为总数,前一页,当前页,下一页,跳转
:total="listpage.total" 数据总条目数
:current-page.sync="listpage.currentNo" 当前页数
:page-size="listpage.pageSize" 每页显示多少条数据
@current-change="CurrentPage" 当current-page改变时的操作
-->
<el-pagination
background
layout="total,prev, pager, next,jumper"
:total="listpage.total"
:current-page.sync="listpage.currentNo"
:page-size="listpage.pageSize"
@current-change="CurrentPage"
></el-pagination>
- Upload 上传组件
<!-- 文件上传 -->
<!--
action="https://jsonplaceholder.typicode.com/posts/" //上传的地址
:on-preview="handlePreview" //点击已上传文件的操作
:on-remove="handleRemove" //移除文件的操作
:before-remove="beforeRemove"//移除文件之前的操作
multiple //是否支持多选文件
:limit="3" //允许最大上传文件数
:on-exceed="handleExceed" //文件超出个数的操作
:file-list="fileList" //上传的文件列表
-->
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
网友评论