跨分页保持复选框状态 vue-bootstrap

Question

我正在使用 bootstrap table 使用分页来显示用户。每一行都有一个复选框，用于一次 select 多个复选框以执行一项操作。我设法将函数写入 select 一个和 select 全部，使数组保持分页。但是现在我无法在使用分页浏览页面时控制 ui 。正如我所说，我创建的用于存储 selected 用户的数组跨页面，但我 'loose the tick' 在复选框上......看起来 v-model 绑定在浏览页面时丢失了。 .. 这里是代码的固有部分，希望有人能提供帮助。在模板中：

<b-table
  v-if="users && users.length > 0 && !isLoading"
  id="table-transition-userList"
  :key="users.id"
  responsive
  :tbody-transition-props="transProps"
  :fields="fields"
  :items="users"
  hover
  class="mx-2 py-1 tbl-user-list"
  :per-page="perPage"
  :filter="filter"
  :filterIncludedFields="filterOn"
  @filtered="onFiltered"
> 
  <template
    v-slot:head(checkbox)="data"
  >
    <b-form-checkbox
      size="lg"
      v-model="isSelectedAll"
      @change="selectAll(data)"
    />
  </template>
  <template
     v-slot:cell(checkbox)="data"
  >
     <b-form-checkbox
        v-model="data.item.selected"
        @change="select(data.item)"
     />
  </template>

在脚本数据中：

fields: [
  { key: 'checkbox', label: ''},
  { key: 'fullName', label: 'Utente' },
  { key: 'user.username', label: 'Username' },
  { key: 'user.email', label: 'Email' },
  { key: 'buttons', label: 'Operazioni' }
],
totalRows: 1,
currentPage: 1,
perPage: 5,
pageOptions: [5, 10, 15, 20, 25],
filter: null,
filterOn: [],
users: [],
selectedUsers: [],
isSelectedAll: false

在方法中：

selectAll() {
  this.isSelectedAll = !this.isSelectedAll
  this.users.forEach(user => user.selected = this.isSelectedAll)

  const notSelected = this.users.filter(user => !user.selected)
  const selected = this.users.filter(user => user.selected)

  // new selected users array without current page selected users
  let selectedUsersCopy = this.selectedUsers.slice().filter(user =>
    !notSelected.find(e => e.id === user.id)
  )
  if(notSelected.length > 0) {
    this.isSelectedAll = true
  }
  else {
    this.isSelectedAll = false
  }
  this.selectedUsers = [
    ...selectedUsersCopy,
    ...selected.filter(user => !selectedUsersCopy.find(e => e.id === user.id))
  ]
},
select(user) {
  user.selected = !user.selected
  this.isSelectedAll = false
  const selected = this.users.filter(user => user.selected)
  if(selected.length === this.users.length) {
    this.isSelectedAll = true
  }
  else {
    this.isSelectedAll = false
  }
  let isDouble = false
  if(this.selectedUsers.find(v => v.user.id === user.id)) isDouble = true
  if(user.selected) {
    if(isDouble) {
      console.log('double if user selected and isDouble', isDouble)
      console.log("object already exists", this.selectedUsers)
      return
    }
    else {
      this.selectedUsers.push(user)
      return this.selectedUsers
    }
  }
  else {
    const index = this.selectedUsers.indexOf(user);
    this.selectedUsers.splice(index, 1);
    console.log("removed, new array: ", this.selectedUsers)
  }
},
async pagination(page) {
  const payload = {
    limit: this.perPage,
    offset: (page - 1) * this.perPage
  }
  this.isLoading = true
  this.isSelectedAll = false
  await this.$store.dispatch('user/setUsers', payload)
  const response = this.$store.getters.users
  this.users = response.results
  this.isLoading = false
  this.currentPage = page
}

我的分页调用一个 api 具有不同的限制和偏移量。我认为问题出在表单复选框的 built-in checked 属性中...

感谢任何能给我提示的人。 xx

Answer 1

您的商店调度事件是否正在执行 axios 调用以获取数据页面？然后该行的复选框状态将是从调用远程服务器返回的状态（在这种情况下它被重置）。

收到分页数据后，您需要对其进行迭代并根据 selectedUsers 中的存在将 selected 值设置为 true 或 false ] 数组，然后将其传递给 <b-table>

async pagination(page) {
  const payload = {
    limit: this.perPage,
    offset: (page - 1) * this.perPage
  }
  this.isLoading = true
  this.isSelectedAll = false
  await this.$store.dispatch('user/setUsers', payload)
  const response = this.$store.getters.users
  // Restore the selected state before passing the array to b-table
  this.users = response.results.map(user => {
     // if the user is found in selectedUsers array, then set
     // set the selected state to `true`, otherwise `false`
     // to restore the selected state
     user.selected = !!this.selectedUsers.find(u => u.id === user.id)
     return user
  })
  this.isLoading = false
  this.currentPage = page
}

我相信你也可能在这一行中有错误：

if (this.selectedUsers.find(v => v.user.id === user.id)) isDouble = true

我认为应该是：

if (this.selectedUsers.find(u => u.id === user.id)) isDouble = true

跨分页保持复选框状态 vue-bootstrap

Keep checkbox state across pagination vue-bootstrap

checkbox

pagination

state

vuejs2

bootstrap-vue