前端实现动态分页，可变列的前端代码

以下是一个使用Vue.js实现动态分页、可变列的前端代码示例（仅供参考）：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="col in columns">{{ col }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in displayedItems">
          <td v-for="col in columns">{{ item[col] }}</td>
        </tr>
      </tbody>
    </table>
    <div>
      <button @click="prevPage">Prev</button>
      <button @click="nextPage">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Alice', age: 20 },
        { id: 2, name: 'Bob', age: 22 },
        { id: 3, name: 'Charlie', age: 25 },
        { id: 4, name: 'David', age: 28 },
        { id: 5, name: 'Emily', age: 30 },
        { id: 6, name: 'Frank', age: 35 },
        { id: 7, name: 'Grace', age: 40 },
        { id: 8, name: 'Henry', age: 45 },
        { id: 9, name: 'Iris', age: 50 },
        { id: 10, name: 'Jack', age: 55 },
        { id: 11, name: 'Kate', age: 60 },
        { id: 12, name: 'Leo', age: 65 },
      ],
      columns: ['id', 'name', 'age'],
      pageSize: 5,
      currentPage: 1,
    }
  },
  computed: {
    displayedItems() {
      const startIndex = (this.currentPage - 1) * this.pageSize
      const endIndex = startIndex + this.pageSize
      return this.items.slice(startIndex, endIndex)
    },
    totalPages() {
      return Math.ceil(this.items.length / this.pageSize)
    },
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
      }
    },
  },
}
</script>

在这个示例中，我们使用了Vue.js框架来实现动态分页和可变列的功能。我们首先定义了一个items数组，其中包含了我们需要展示的数据。然后，我们定义了一个columns数组，其中包含了我们需要展示的列名。

在模板中，我们使用了一个table标签来展示数据。我们使用v-for指令来动态生成表头和表格数据。我们还使用了computed属性来计算总页数和当前页要显示的数据。

在methods中，我们定义了两个方法，用于实现翻页功能。当用户点击“Prev”按钮时，我们将当前页减1；当用户点击“Next”按钮时，我们将当前页加1。

总的来说，这个示例代码可以实现动态分页和可变列的功能。需要注意的是，这只是一个简单的示例代码，实际项目中可能需要根据具体需求进行修改和扩展。