如何使引导表行可选择并保留过滤器上的选定行？答案

【问题标题】：How to make the bootstrap table rows selectable and remain the selected rows on filter?如何使引导表行可选择并保留过滤器上的选定行？
【发布时间】：2018-09-30 23:05:08
【问题描述】：

我想要一个引导表并且已经添加了输入复选框来选择它们以及一个过滤器来获取所有选定的项目（这完全没问题）。

选择一行后，数据集属性“selected”应设置为1或true。

但是当我过滤时我也想保留所有选定的值（这应该已经通过在我的数据集中保留“选定”属性来解决，不是吗？）

目前我可以检查复选框并且复选框值本身也已更改，但即使我将 v-model 用于 row.value（2-way-databinding），row.value 变量仍保持不变

所以。 如何更改引导表中属性的值？

<b-table show-empty
             stacked="md"
             :items="items"
             :fields="fields"
             :current-page="currentPage"
             :per-page="perPage"
             :filter="filter"
             :sort-by.sync="sortBy"
             :sort-desc.sync="sortDesc"
             @filtered="onFiltered"
    >

      <template slot="selected" slot-scope="row">
       <input type="checkbox" id="checkbox" v-model="row.value">
        {{row.value}}
      </template>


      <template slot="name" slot-scope="row">{{row.value}}</template>
      <template slot="sapNumber" slot-scope="row">{{row.value}}</template>
      <template slot="createDate" slot-scope="row">{{ moment(row.value).format('dd DD.MM.YY, hh:mm:ss')}}</template>
      <template slot="master" slot-scope="row">
        <!-- We use @click.stop here to prevent a 'row-clicked' event from also happening -->
        <b-button size="sm" @click.stop="info(row.item, row.index, $event.target)" class="mr-1">
          Info modal
        </b-button>
        <b-button size="sm" @click.stop="row.toggleDetails">
          {{ row.detailsShowing ? 'Hide' : 'Show' }} Details
        </b-button>
      </template>
      <template slot="row-details" slot-scope="row">
        <b-card>
          <ul>
            <li v-for="(value, key) in row.item" :key="key">{{ key }}: {{ value}}</li>
          </ul>
        </b-card>
      </template>
    </b-table>

【问题讨论】：

标签： javascript twitter-bootstrap vue.js vuejs2

【解决方案1】：

解决方案非常简单。只需更改这部分

<template slot="selected" slot-scope="row">
    <input type="checkbox" id="checkbox" v-model="row.value">
        {{row.value}}
</template>

到这个

 <template slot="selected" slot-scope="data">
     <input type="checkbox" id="checkbox" v-model="data.item.selected">
 </template>

因此，此列的范围不会影响迭代器数据集（在我的例子中是“行”），而是数据属性的根数据集。

【讨论】：