Vue+elementUI实现动态展示列表的数据

下面是我对“Vue+elementUI实现动态展示列表的数据”的完整攻略。

1. 确定需求

在开始实现之前，我们需要确定需求。首先需要明确要展示的列表数据是什么，包含哪些字段，每个字段对应表格中的哪一列。

例如，我们需要展示一个用户列表，包含了用户名、年龄、性别、地址等字段，需要在表格中展示这些字段内容，并提供排序、过滤等功能。

2. 安装依赖

确定需求之后，我们需要安装Vue和elementUI的依赖。

在项目中使用Vue，需要在控制台输入下面的命令安装：

npm install vue --save

在项目中使用elementUI，需要在控制台输入下面的命令安装：

npm i element-ui -S

3. 创建Vue组件

创建Vue组件，在组件中定义需要的表格和表格的数据。在此过程中，我们可以配置表格的列和行，以及提供筛选、排序等功能。这里使用elementUI的Table组件来创建表格。

示例：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

4. 取得数据

从后端获取数据并将其保存到Data属性中以便于实现动态展示列表的数据。

示例：

<script>
import axios from 'axios';
export default {
  data () {
    return {
      tableData: []
    }
  },
  created () {
    axios.get('/api/users').then(response => {
      this.tableData = response.data;
    })
  }
}
</script>

5.实现分页

如果列表数据比较多，一次性展示所有数据会对用户体验产生影响。这时候我们可以考虑使用分页功能实现长列表数据的分页显示。

实现方法：使用elementUI的Pagination组件来实现分页功能。

示例：

<template>
  <div>
    <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data () {
    return {
      tableData: [],
      pageSize: 10,
      currentPage: 1,
    }
  },
  created () {
    axios.get('/api/users').then(response => {
      this.tableData = response.data;
    })
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
}
</script>