如何在el-table的Element UI Vuejs中使用分页？

Question

我有这个表，我在其中填充了一个对象数组，我的问题是如何向该表中添加分页。

<el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="module"
          label="Module"
         >
        </el-table-column>
        <el-table-column
          prop="action"
          label="Action"
          >
          <template slot-scope="scope">
            <div v-if="scope.row.has_changes == true">
              <ul>
                  <li v-for="(ch, key) in scope.row.changes" :key="key">
                    <b>{{key}}</b> to <b>{{ch}}</b>
                  </li>
                </ul>
            </div>
            <div v-else-if="scope.row.action == 'updated'"> Updated this form</div>
            <div v-else-if="scope.row.action == 'created'">Created a new record</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="Date">
        </el-table-column>
        <el-pagination
          small
          layout="prev, pager, next"
          :total="50">
        </el-pagination>
      </el-table>

您可以看到我在做

<el-pagination
   small
   layout = "prev, pager, next"
   : total = "50">
</el-pagination>

内部el-table，但未应用

Answer 1

我不确定，但是我相信当您在表组件之外使用el-pagination时，引擎只会忽略它。

您可能希望为此使用插槽进行检查，查看摘要行并展开元素ui表的行。这里是一个例子https://codepen.io/pen/?&editable=true=https%3A%2F%2Felement.eleme.io%2F