2

我在 Vue.js 上工作并使用 Element UI 库。

我有一个包含大量数据的 el 表，下面有一个 el 分页，但我无法连接它们。

目前，当我单击分页的不同页面时，分页元素的选定编号会发生变化，但不会更新表内的数据。

表格和分页中的数据属性设置为相同的变量（“tableData”），但这不起作用。

如何连接这两个元素？

这是我的 .vue 代码：

                      <el-table :data="tableData" stripe class="margin-top-5" style="width: 100%">
                        <el-table-column 
                            align="center"
                            label="Favori" 
                            sortable
                            min-width="75">
                                <template slot-scope="scope">
                                    <i class="el-icon-star-off"></i>
                                </template>
                        </el-table-column>
                        <el-table-column 
                            align="center"
                            prop="legal_name" 
                            :label="$gettext('Raison sociale')" 
                            sortable 
                            min-width="120">
                        </el-table-column>
                        <el-table-column 
                            align="center"
                            prop="address" 
                            :label="$gettext('Adresse')" 
                            sortable 
                            min-width="180">
                        </el-table-column>
                        <el-table-column 
                            align="center"
                            prop="city" 
                            :label="$gettext('Ville')" 
                            sortable 
                            min-width="100">
                        </el-table-column>
                        <el-table-column 
                            align="center"
                            prop="zip_code" 
                            sortable 
                            :label="$gettext('Code postal')"
                            min-width="110">
                        </el-table-column>
                        <el-table-column 
                            align="center"
                            prop="country" 
                            :label="$gettext('Pays')" 
                            sortable>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-col>
        </el-row>

        <el-row type="flex" justify="end" class="margin-top-5 margin-bottom-5 row-pagination">
            <el-button v-translate size="small" class="show-all">Afficher tout</el-button>
            <el-pagination
                background
                layout="->, prev, pager, next"
                :total="1000"
                :data="tableData">
            </el-pagination>
        </el-row>

在我的 .js 关联文件中，我有：

data() {
return {
  tableData: [],
};

和 ：

created() {
api.getAddresses().then(addresses => {
  this.tableData = addresses;
});
}

预先感谢您的帮助！

4

2 回答 2

2

@Pearly Spencer, You should have a local computed array which will hold the displayed data, something like:

In the html: change tableData to displayData: 

:data="displayData"

In the script:

computed: {  

displayData() {
    if (!this.tableData || this.tableData.length === 0) return [];

    <!---   Your filter logic goes here --->

  },

}

In other words, you should implement the displayData manually upon each change / click via handleCurrentChange

methods: {
        handleCurrentChange(val) {

        }
    }

Good Luck!

于 2018-07-08T11:03:00.720 回答
0

在你的表中使用它：pagination.sync="pagination"

pagination: {
   rowsPerPage: 5
}
<v-data-table
:headers="headers"
:items="tableValue"
:search="search"
class="elevation-1"
:pagination.sync="pagination"
>
<template slot="items" slot-scope="props">
   <td>{{ props.item.name }}</td>
   <td>{{ props.item.Source }}</td>
   <td>{{ props.item.Destination }}</td>
   <td>{{ props.item.TripTime }}</td>
   <td>{{ props.item.Status }}</td>
</template>
</v-data-table>
<div class="text-xs-center pt-2">
<v-pagination v-model="pagination.page" :length="pages">
</v-pagination>

于 2018-12-04T13:02:35.720 回答