行选择和分页 - Vue

Question

使用 vue，我将我的数据库显示在一个表中。 我的表包含很多行。因此，我使用分页。 使用 select 函数，我可以选择多行并将它们存储在一个数组中。

问题：

• 我在表中选择了一些行。该行中的数据存储在我的名为 selected 的数组中。我让他们出现在我的桌子旁边。 使用分页，我转到下一页。我的数据仍然存储在这个数组中。当我现在选择另一行时。我的数组被清空了， 我的部分中的数据已丢失。

我该如何解决这个问题？为什么会这样？有没有办法存储这些数据以免丢失？ 我错过了什么？

Bellow，你找到了我的代码。谢谢您的帮助。

Vue 代码

   <!-- Main table -->
<b-row align-v="start">
    <b-col sm="8">
        <b-table class="col-sm-12"
            show-empty
            striped hover
            selectable
            stacked="md"
            :items="values"
            :fields="fields"
            :select-mode="selectMode"
            :current-page="currentPage"
            :filter="valueSearch"
            :sort-by.sync="sortBy"
            :sort-desc.sync="sortDesc"
            :sort-direction="sortDirection"
            @filtered="onFiltered"
            @row-selected="rowSelected"

            <template slot="name" slot-scope="row">
                {{row.item.name}}
            </template>
            <template slot="id" slot-scope="row">
                {{ row.item.id }}
            </template>
            <template slot="ref" slot-scope="row">
                {{row.item.ref}}
            </template>
            <template slot="specific" slot-scope="row">
                {{row.item.specific}}
            </template>
            <template slot="iso" slot-scope="row">
                {{row.item.iso}}
            </template>
            <template slot="tax" slot-scope="row">
                {{row.item.tax}}
            </template>
            <template slot="amount" slot-scope="row">
                <span class='dot largerSize' :class="statusColor[range(row.item.amount)]"></span>
            </template>
        </b-table>
    </b-col>
    <b-col sm="4">
        Here comes the value selected. 
        <div v-for="selectedvalue in selected" :key="selectedvalue.id">
            {{ selectedvalue.id }} - {{selectedvalue.name}}
            {{selected}}

        </div>
    </b-col>
</b-row>
 <!-- How is sorted? & Pagnation -->
<b-row align-v="end" class="mb-2">
    <b-col>
        Sorting By: <b>{{ sortBy | capitalize }}</b>, Sort Direction:
        <b>{{ sortDesc ? 'Descending' : 'Ascending' }}</b>
    </b-col>
    <b-col>
        <b-pagination v-model="currentPage" :total-rows="totalRows" :per-page="perPage" class="my-0"></b-pagination>
    </b-col>
    <b-col>One of three columns</b-col>
</b-row>

Javascript

<script>   
export default {
    props: ['valuedata','minamount','maxamount'],
    data() {
        return {
            values: this.valuedata,
            statusColor: ["red","orange","green"],
            totalRows: 1,
            currentPage: 1,
            perPage: 10,
            pageOptions: [5, 10, 20, 50,100],
            sortBy: "id",
            sortDesc: false,
            sortDirection: 'asc',
            filter: null,
            selectMode: 'multi',
            fixed: true,
            selected: [],
          fields: {
                id: {
                    label: "Id",
                    sortable: true
                },
                name: {
                    label: "Name",
                    sortable: true
                },
                ref: {
                    label: "Ref",
                    sortable: true
                },
                iso: {
                    label: "Iso",
                    sortable: true
                },
                tax: {
                    label: "Tax",
                    sortable: true
                },
                specific: {
                    label: "specific",
                    sortable: true
                },
                amount: {
                    label: "amount",
                    sortable: true
                }                    
            }
        } 
    },
     computed:{ 
        hits: function(){
            var hits = this.values.length
            return hits
        }            
    },
    mounted () {
        this.totalRows = this.values.length

    },
     methods: {
        onFiltered(filteredItems) {
            // Trigger pagination to update the number of buttons/pages due to filtering
            this.totalRows = filteredItems.length
            this.currentPage = 1
        },
        // Option: enables the storage of selected rows
        rowSelected(items){
            console.log(items[0].name)
            this.selected = items
        },
        // Function: color code amount
        range: function(x){
            if (x < this.minamount){
                return 0;
            }else if(x >= this.minamount && x <= this.maxamount ){
                return 1;
            }else if(x >= this.maxamount ){
                return 2;
            }
        }
    },
    filters: {
        // Function: captitalize the first letter
        capitalize: function (value) {
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
         }
    }
}

Answer 1

据我了解，您替换了selected 中的所有项目：

// Option: enables the storage of selected rows
rowSelected(items){
    console.log(items[0].name)
    this.selected = items
},

您想要做的是添加值，而不是替换它们，所以恕我直言，您应该做的是：

// Option: enables the storage of selected rows
rowSelected(items){
    console.log(items[0].name)

    items.forEach(item => {
        const selectedIds = this.selected.map(selectedItem => selectedItem.id);

        // I guess you don't want twice the same item in your array
        if (!selectedIds.includes(item.id) {
           this.selected.push(item)
        }
    })
},