Paging check function in the Table of Vue and Element-Ui


In the background management system, when using the table to display data, possible needs is a number of selections and then perform bulk operations, and it is also desirable to flip more.

The page structure is as follows

在vue和element-ui的table中实现分页复选功能

Edit
          Analog data implementation paging       DATA () {return {TableData: [ ], Multipleselection: [], PAGINATION: {CurrentPage: 1, Size: 10, Total: 1000}}}, beforemount () {this.Fetchdata ()}, methods: {fetchdata () {this.tableData = [] let START = (this.pagination.currentpage - 1) * this.pagination.size let end = this.pagination.currentpage * this.pagination.size settimeout (_ => {for (let i = start; i    
Show selected item

Selected: {{allmultipleselection}}
AllMultiPleSelection: [],
 Store the selected item in the check event  < end; i++) {
  this.tableData.push({
   id: i,
   name: `王${i}兰`
  })
  }
 }
 },
 handleCurrentChange () {
 this.fetchData()
 },
 handleSelectionChange (val) {
 this.multipleSelection = val
 },
} The main idea is: 
Put the current page selected data into all options

Put all option data Issue unselected in the current page
  
HandleSelectionChange (VAL) {this.multipleeselection = VAL @tip implementation paging check console. LOG (VAL, 'Selection') setTimeout (_ => {this.resolveallSelection ()}, 50)}, resolveallselection () {let currentPageData = this.tableData.map (item => item [this.uniqueKey]) /// All current data let currentPageSelected = this.multipleSelection.map (item => item [this.uniqueKey]) // this page selected data let currentPageNotSelected = currentPageData.filter (item =>! currentPageSelected.includes (item)) // Current page Unselected data // puts the current page Selected data into all options currentpageselected.ForeACH (item =>{if (! ") {this.allmultiPleSelection.push (item)}}) // Displaced CurrentPageNotSelected.ForeAach (item => {Let) // IDX = this.allmultiPleselection.indexof (item) if (idx> -1) {this.allmultipleselection.splice (idx, 1)}}) console.log (this.allmultiPleselection, 'all')},

At this point, it is also necessary to reallocate between the switching page, that is, traversing the current page All data exists in all the options, it is selected.

fetchdata () {// … settimeout (_ => {// … // @tip implementation paging check settimeout (_ => {this .setSelectedRow ()}, 50)}, 200)}, setSelectedRow () {// Setup current page Option this.tableData.Foreach (item => {if (this.allmultipleeselection.includes (item [this.uniqueKey]) ) {this. $ refs.astable.togglerowselection (item, true) console.log (item [this.UniqueKey], ‘set’)}})},


  • The paging check function is implemented.
  • All code is stored in @ Careteen / LAN-Vue
  • View Demo
Clone warehouse and the relying on the dependence
   
git clone git@github.com: calerteenl / lan-vue.gitnpm installnpm Run Serve

Browser Open http: // localhost: 8080 / # / examples / PAGINGCHECK can see the effect
   
The above is a small package to implement a paging check function in the Table of the Vue and Element-UI described. I hope to help everyone. If you have any questions, please leave a message, Xiaobian will reply to everyone in time. Thank you very much for your support of Tumi Cloud Website!
If you think this article helps you, welcome to reprint, please indicate the source, thank you!

在vue和element-ui的table中实现分页复选功能

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment