vue实现表格数据显示

Vue 实现表格数据显示的方法

基础表格实现

使用 Vue 的 v-for 指令循环渲染表格数据，结合 el-table（Element UI）或原生 HTML 表格：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in tableData" :key="index">
        <td v-for="(value, key) in item" :key="key">{{ value }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      headers: ['姓名', '年龄', '城市'],
      tableData: [
        { 姓名: '张三', 年龄: 25, 城市: '北京' },
        { 姓名: '李四', 年龄: 30, 城市: '上海' }
      ]
    };
  }
};
</script>

使用 Element UI 表格组件

若项目中引入 Element UI，可通过 el-table 快速实现高级功能（排序、分页等）：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="age" label="年龄" sortable></el-table-column>
    <el-table-column prop="city" label="城市"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, city: '北京' },
        { name: '李四', age: 30, city: '上海' }
      ]
    };
  }
};
</script>

动态加载远程数据

通过 axios 请求后端接口数据并绑定到表格：

<template>
  <el-table :data="tableData" v-loading="loading">
    <!-- 列定义 -->
  </el-table>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tableData: [],
      loading: false
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.loading = true;
      axios.get('/api/data').then(response => {
        this.tableData = response.data;
      }).finally(() => {
        this.loading = false;
      });
    }
  }
};
</script>

自定义单元格内容

通过插槽自定义单元格渲染逻辑：

<el-table-column label="状态">
  <template #default="{ row }">
    <el-tag :type="row.status === '成功' ? 'success' : 'danger'">
      {{ row.status }}
    </el-tag>
  </template>
</el-table-column>

分页与筛选

结合 el-pagination 实现分页控制：

<template>
  <el-table :data="pagedData"></el-table>
  <el-pagination
    @current-change="handlePageChange"
    :current-page="currentPage"
    :page-size="pageSize"
    :total="total">
  </el-pagination>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100,
      allData: [] // 原始数据
    };
  },
  computed: {
    pagedData() {
      return this.allData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    }
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page;
    }
  }
};
</script>