current position:Home>Vxe table check box paging data memory selection problem

Vxe table check box paging data memory selection problem

2022-04-29 13:13:06The moon at two in the morning

edition

3.5.0  Version and above 
 Copy code 

Necessary configuration

row-config="{ isCurrent: true, keyField: 'id' }"

  • isCurrent: Whether the current line is highlighted
  • keyField: Field name of unique primary key of user-defined row data ( Automatically generated by default ) amount to row-id

checkbox-config="{ checkRowKeys: selectRowsId, reserve: true }"

  • checkRowKeys: The specified line is checked by default ( It will only be triggered once during initialization , Need to have row-id)
  • reserve: Whether to keep the checked status , For some scenarios, you may use , For example, after the data is refreshed, the previously selected state is retained ( Need to have row-id)

Reference documents

effect

image.png

image.png

Code

<template>
  <div> <vxe-table ref="table" resizable :data="tableData1" :row-config="{ isCurrent: true, keyField: 'id' }" :checkbox-config="{ checkRowKeys: selectRowsId, reserve: true }" @checkbox-change="changeBox" @checkbox-all="changeBoxAll" > <vxe-column type="checkbox" title="ID" width="280"></vxe-column> <vxe-column field="name" title="Name"></vxe-column> </vxe-table> <vxe-pager align="left" :current-page.sync="page1.currentPage" :page-size.sync="page1.pageSize" :total="page1.totalResult" @page-change="pageChange" > </vxe-pager> <el-button @click="selectExceed"> choice Id Greater than 3 The line of </el-button> <el-button @click="selectBelow"> choice ID Less than 3 The line of </el-button> <el-button @click="clearAll"> Clear all checked data </el-button> </div>
</template>

<script> export default { data() { return { tableData1: [], page1: { currentPage: 1, pageSize: 5, totalResult: 10, }, selectList: [], }; }, computed: { selectRowsId() { return this.selectList.map((item) => item.id); }, }, created() {}, mounted() { this.handlerSearch(); }, methods: { //  Search for  handlerSearch(currentPage, pageSize) { this.page1.currentPage = Number(currentPage) ? Number(currentPage) : 1; this.page1.pageSize = Number(pageSize) ? Number(pageSize) : 5; this.queryTable(); }, //  Pagination  pageChange({ currentPage, pageSize }) { this.handlerSearch(currentPage, pageSize); }, //  get data  async queryTable() { const { data } = await this.$axios("/api/list", { params: { currentPage: this.page1.currentPage, pageSize: this.page1.pageSize, }, }); if (data?.code === 0) this.tableData1 = data.list; }, //  Single choice  changeBox({ records }) { this.handlerSelectRow(records); }, //  Future generations  changeBoxAll({ records }) { this.handlerSelectRow(records); }, //  Process selected rows in the table !!!!! handlerSelectRow(current = []) { const tab = this.$refs.table; const reserves = tab && tab.getCheckboxReserveRecords(); const result = reserves.concat(current); console.log(' Select the rows',result); }, //  The choice is greater than 3 Of ID selectExceed(){ const tab = this.$refs.table; let row = this.tableData1.filter(item => item.id > 3) tab && tab.setCheckboxRow(row, true); this.handlerSelectRow(row) }, //  Choose less than 3 Of ID selectBelow(){ const tab = this.$refs.table; let row = this.tableData1.filter(item => item.id < 3) tab && tab.setCheckboxRow(row, true); this.handlerSelectRow(row) }, //  Clear all options  clearAll(){ const tab = this.$refs.table tab && tab.clearCheckboxReserve() tab && tab.clearCheckboxRow() this.selectList = [] } }, }; </script>

<style lang="less" scoped> </style>

 Copy code 

copyright notice
author[The moon at two in the morning],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/04/202204291313015618.html

Random recommended