Question

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

我有一个包含大量数据的el-table，以及下面的el-pagination，但我无法连接它们。

现在，当我点击分页的不同页面时，所选分页元素的数量会发生变化，但不会更新表格中的数据。

表和分页中的数据属性设置为相同的变量（“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;
});
}

提前感谢您的帮助！

Answer 1

@Pearly Spencer，您应该有一个本地计算数组，该数组将保存显示的数据，例如：

在html中：将tableData更改为displayData：

:data="displayData"

在脚本中：

computed: {  

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

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

  },

}

换句话说，您应该在每次更改时手动实现displayData，或者通过handleCurrentChange单击它。

methods: {
        handleCurrentChange(val) {

        }
    }

祝你好运！

Answer 2

在您的表中使用它：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>

如何链接Element UI的表格和分页？

2 个答案: