elmentui 实现table表单翻页后回显已经勾选过的数据(用reserve-selection属性来实现)
时间: 2024-02-23 15:00:45 浏览: 30
要实现表单翻页后回显已经勾选过的数据,可以使用 `reserve-selection` 属性和 `ref` 引用表格组件的方式来实现。具体步骤如下:
1. 在 `el-table` 组件上添加 `reserve-selection` 属性,表示在翻页或排序等操作后,已经选择的行不会被清除。
```html
<el-table
:data="tableData"
:columns="tableColumns"
v-loading="loading"
border
stripe
highlight-current-row
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
@sort-change="handleSortChange"
@filter-change="handleFilterChange"
@current-change="handleCurrentChange"
@row-dblclick="handleRowDblclick"
:reserve-selection="true"
>
</el-table>
```
2. 在 `el-table` 组件上添加 `ref` 属性,用于在 Vue 实例中引用表格组件。
```html
<el-table
ref="table"
:data="tableData"
:columns="tableColumns"
v-loading="loading"
border
stripe
highlight-current-row
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
@sort-change="handleSortChange"
@filter-change="handleFilterChange"
@current-change="handleCurrentChange"
@row-dblclick="handleRowDblclick"
:reserve-selection="true"
>
</el-table>
```
3. 在 Vue 实例中定义一个 `selectedRows` 数组,用于存储已经选择的行的数据。
```javascript
export default {
data() {
return {
tableData: [],
tableColumns: [],
loading: false,
selectedRows: []
};
},
methods: {
handleSelectionChange(selection) {
this.selectedRows = selection;
}
}
};
```
4. 在 `mounted` 钩子函数中,调用 `this.$refs.table.clearSelection()` 方法清除表格中已经选择的行,然后遍历 `selectedRows` 数组,选中已经选择的行。
```javascript
export default {
data() {
return {
tableData: [],
tableColumns: [],
loading: false,
selectedRows: []
};
},
mounted() {
this.$refs.table.clearSelection();
this.selectedRows.forEach(row => {
this.$refs.table.toggleRowSelection(row, true);
});
},
methods: {
handleSelectionChange(selection) {
this.selectedRows = selection;
}
}
};
```
这样,当表格翻页或者排序等操作后,已经选择的行不会被清除,同时已经选择的行也会被正确地回显出来。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)