vue使用element写列表

在Vue中结合Element UI库编写列表是非常常见的，Element UI提供了丰富的组件库，包括表格（el-table）、分页器（el-pagination）等，可以方便地展示数据和实现用户交互。

首先，你需要安装Element UI和Vue CLI：

npm install element-ui --save
npm install vue --save

然后，在Vue组件中，你可以这样创建一个基于Element UI表格的数据列表：

<template>
  <div>
    <el-table :data="items" style="width: 100%">
      <!-- 表头 -->
      <el-table-column type="index">索引</el-table-column>
      <el-table-column prop="name">姓名</el-table-column>
      <el-table-column prop="age">年龄</el-table-column>
      <!-- 添加更多列... -->
    </el-table>

    <!-- 分页器 -->
    <el-pagination @current-change="handleCurrentChange"
                    :total="total" layout="prev, pager, next">
    </el-pagination>
  </div>
</template>

<script>
import { ElTable, ElPagination } from 'element-ui';

export default {
  components: {
    ElTable,
    ElPagination
  },
  data() {
    return {
      items: [
        // 假设这是你的数据源
        { name: '张三', age: 25 },
        { name: '李四', age: 30 },
        // ...
      ],
      total: 10, // 总记录数，可以根据实际数据动态设置
      currentPage: 1 // 当前页，默认第一页
    };
  },
  methods: {
    handleCurrentChange(page) {
      this.currentPage = page;
      // 如果你想更新数据，可以在这里处理当前页的数据请求
    }
  }
};
</script>

在这个例子中，`items`数组存储了你要显示的数据，`handleCurrentChange`方法用于响应分页器的页面切换。记得根据实际需求调整数据结构和方法。