vue2.0使用element ui

如何实现表格分页和排序功能？

很高兴回答这个问题！在Vue2.0中使用Element UI实现表格分页和排序功能非常简单。首先，我们需要引入Element UI组件和相关的样式文件。然后，在Vue组件的template中使用el-table标签来创建表格，同时指定数据的来源和表格列的定义。为了启用分页和排序功能，我们可以在el-table组件上使用属性，例如:

:columns="tableColumns" //指定表格列的定义
:data="tableData" //指定数据的来源
:height="tableHeight" //设置表格的高度
:stripe="true" //开启斑马纹
:border="true" //添加表格边框
:pagination="true" //启用分页功能
:page-size="pageSize" //设置每页显示的记录数
:current-page="currentPage" //设置当前页码
:sort-by="sortKey" //设置排序的字段
:sort-order="sortOrder" //设置排序的顺序

在Vue组件的script中，我们需要定义tableColumns和tableData变量，分别用来指定表格列的定义和数据的来源。我们还需要定义pageSize、currentPage、sortKey和sortOrder变量，分别用来设置每页显示的记录数、当前页码、排序的字段和排序的顺序。最后，我们可以使用methods选项来定义相关的函数，例如：

handleSortChange(column){
if(column.order === "ascending"){
this.sortOrder = "asc";
}else if(column.order === "descending"){
this.sortOrder = "desc";
}else{
this.sortOrder = "";
}
this.sortKey = column.prop;
this.fetchData(); //重新获取数据
},
handleCurrentChange(currentPage){
this.currentPage = currentPage;
this.fetchData(); //重新获取数据
}

以上是一些简单的示例代码，用来演示如何使用Vue2.0和Element UI实现表格分页和排序功能。希望能够对您有所帮助！