elementui table 分页记住上一次

Element UI的table组件默认是不会记住上一次的分页状态的，需要通过自定义的方式来实现。

实现方式：

1. 在使用Element UI的table组件时，需要为table绑定一个ref属性，例如ref="myTable"。

2. 定义一个data属性，用于存储当前的分页信息。例如：currentPage、pageSize。

3. 在mounted生命周期钩子函数中，获取上次保存的分页信息并进行赋值。可以通过localStorage或者vuex等方式进行保存。

4. 在table组件的@current-change事件中，监听分页变化，将当前的分页信息保存到data中的currentPage和pageSize属性中。

5. 在使用Element UI的table组件时，通过设置:current-page.sync属性将currentPage属性与table组件的分页属性进行实时的双向绑定。

6. 在使用Element UI的table组件时，通过设置:page-size.sync属性将pageSize属性与table组件的每页条数属性进行实时的双向绑定。

7. 在beforeDestroy生命周期钩子函数中，将当前的分页信息保存到localStorage或者vuex等方式中，以便下次进入页面时能够获取到上次的分页信息。

通过以上步骤，可以实现Element UI的table组件在分页时记住上一次的分页状态。每次进入页面时都会自动恢复到上次离开时的分页状态。

相关问题

elementui table后端分页

### 回答1：
Element UI 是一套基于 Vue.js 的组件库，其中包含了丰富的 UI 组件，比如 Table 表格组件。在使用 Element UI 的 Table 组件进行后端分页时，需要进行以下步骤：

1. 后端准备：首先，后端需要提供一个接口来获取分页数据。这个接口应该包含获取当前页数据的逻辑，同时还需要对分页参数进行处理，比如每页数量、当前页码等。

2. 前端配置：在前端代码中，需要对 Table 组件进行配置。首先，需要设置表格的数据源为后端接口，可以使用 `:data` 属性来设置，例如 `:data="tableData"`。`tableData` 是一个变量，用来存储后端返回的数据。接着，还需要设置表格的分页属性，使用 `:pager` 属性来配置，例如 `:pager="true"`。设置为 `true` 表示启用分页功能。

3. 分页参数传递：在请求后端数据时，需要将分页相关的参数传递给后端接口。例如，可以使用 `@load="handleLoad"` 事件来触发加载数据的方法，并在该方法中将分页参数传递给后端接口。

4. 后端返回数据：后端接口收到请求后，根据传递的分页参数进行相应的处理，然后返回包含当前页数据的结果。

5. 数据渲染：前端在接收到后端返回的数据后，可以将数据显示在 Table 组件中。可以通过 `v-for` 指令来循环遍历数据，然后在相应的列上使用插值表达式将数据渲染出来。

通过以上步骤，就可以实现 Element UI Table 的后端分页功能。前端通过配置表格的数据源和分页属性，然后将分页参数传递给后端接口，后端接口根据分页参数处理数据并返回给前端，最后前端将数据渲染显示在 Table 组件中。

### 回答2：
Element UI是一款基于Vue.js的UI组件库，其中包含了很多常用的UI组件，如Table（表格）。Element UI Table组件的后端分页是指在数据量较大时，通过与后端进行交互，在前端只展示部分数据，而不是一次性加载所有数据。

要实现Element UI Table的后端分页，需要先获取到后端返回的总数据量，然后根据每页展示的数据量和当前页码向后端发送请求，获取当前页的数据。具体的步骤如下：

1. 在后端实现数据接口：后端应提供一个接口用于获取表格数据。该接口需接收参数：每页展示的数据量、当前页码，并根据这些参数返回对应的数据。

2. 在前端配置Table组件：在前端代码中，配置Table组件，并指定相应的属性，如数据源（data）、每页展示的数据量（page-size）、总数据量（total），以及当前页码（current-page）等。

3. 设置分页：在前端代码中，配置分页组件（Pagination），并指定相应的属性，如总数据量（total）、每页展示的数据量（page-size），以及当前页码（current-page）等。

4. 定义获取数据的方法：在前端代码中，定义一个方法用于向后端发送请求并获取数据。该方法应接收当前页码作为参数，并通过Axios等工具发送请求，传递相应的参数和请求头信息。

5. 分页操作：当用户切换页码时，调用获取数据的方法，并将当前页码作为参数传入，从后端获取数据并更新表格展示的数据。

通过以上步骤，就可以实现Element UI Table的后端分页功能。每次用户切换页码时，都会向后端请求数据，只展示当前页的数据，从而降低了前端的内存和渲染开销。同时，也能提高用户体验，保证了页面的加载速度和性能。

### 回答3：
Element-UI是一个基于Vue.js的组件库，它提供了一系列的UI组件，其中包括了Table组件。

Element-UI的Table组件可以支持前端分页和后端分页两种方式。对于后端分页，我们需要在后端进行相应的处理来返回分页数据。

首先，在前端，我们需要使用Table组件的`data`属性来绑定后端返回的数据列表，并使用`total`属性来绑定后端返回的数据总量。

然后，在后端，我们需要根据前端传递过来的分页参数（如页码、每页条数等）来查询相应的数据，并计算出总量。然后将查询到的数据列表和总量返回给前端。

具体的后端分页实现方式会根据不同的后端技术而有所不同。

例如，对于Java后端，我们可以使用Spring Boot框架来实现后端分页。首先，在后端定义一个Controller，接收前端传递的分页参数，并调用Service层的方法进行数据查询和计算总量。然后将查询到的数据列表和总量封装成一个分页对象，并返回给前端。

@RestController
@RequestMapping("/api/table")
public class TableController {

    @Autowired
    private TableService tableService;

    @GetMapping("/list")
    public ResultData<TableData> getList(@RequestParam("pageNumber") int pageNumber, 
                                         @RequestParam("pageSize") int pageSize) {
        List<TableItem> dataList = tableService.getDataList(pageNumber, pageSize);
        int total = tableService.getTotal();
        TableData tableData = new TableData(dataList, total);
        return new ResultData<>(tableData);
    }
}

在Service层，我们可以使用MyBatis等持久层框架进行数据查询，并在查询语句中加入分页逻辑。

@Service
public class TableServiceImpl implements TableService {

    @Autowired
    private TableMapper tableMapper;

    @Override
    public List<TableItem> getDataList(int pageNumber, int pageSize) {
        PageHelper.startPage(pageNumber, pageSize);
        return tableMapper.selectDataList();
    }

    @Override
    public int getTotal() {
        return tableMapper.selectTotal();
    }
}

对于其他后端技术，可以根据相应的框架和数据库操作工具来实现后端分页逻辑。

总之，Element-UI的Table组件支持后端分页，我们需要在前端将分页参数传递给后端，并在后端根据这些参数进行数据查询和计算总量，然后将查询到的数据列表和总量返回给前端。

如何阻止elementUI table分页点击后滚动条滑动

您可以尝试在分页组件上使用`@click.native.stop`来阻止点击事件的传播。这样就可以防止点击分页时页面滚动。例如：

<el-pagination
  @click.native.stop
  :total="100"
  :page-size="10">
</el-pagination>

另外，如果您使用的是`el-table`组件，可以尝试使用`v-loading`指令来避免在分页时滚动条滑动。例如：

<el-table
  v-loading="isLoading"
  :data="tableData"
  :height="tableHeight"
  :row-key="row => row.id">
  <!-- 表格列定义 -->
</el-table>

这里的`isLoading`是一个布尔值，用于控制是否显示加载中动画。在翻页时，您可以将`isLoading`设置为`true`，然后在数据加载完成后再将其设置为`false`，这样就可以避免滚动条滑动的问题。