vue表格实现教学

基础表格实现

使用 Vue 的 v-for 指令渲染数组数据到表格中。

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

<script>
export default {
  data() {
    return {
      headers: ['ID', 'Name', 'Age'],
      tableData: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 }
      ]
    };
  }
};
</script>

动态绑定与排序

通过计算属性实现表格数据排序。

<template>
  <table>
    <thead>
      <tr>
        <th @click="sortBy('id')">ID</th>
        <th @click="sortBy('name')">Name</th>
        <th @click="sortBy('age')">Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in sortedData" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 2, name: 'Bob', age: 30 },
        { id: 1, name: 'Alice', age: 25 }
      ],
      sortKey: 'id',
      sortOrder: 1 // 1为升序，-1为降序
    };
  },
  computed: {
    sortedData() {
      return [...this.tableData].sort((a, b) => {
        return (a[this.sortKey] > b[this.sortKey] ? 1 : -1) * this.sortOrder;
      });
    }
  },
  methods: {
    sortBy(key) {
      this.sortOrder = this.sortKey === key ? -this.sortOrder : 1;
      this.sortKey = key;
    }
  }
};
</script>

分页功能

结合 v-for 和计算属性实现分页逻辑。

<template>
  <table>
    <thead><!-- 表头省略 --></thead>
    <tbody>
      <tr v-for="item in paginatedData" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>
  <div>
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <span>第 {{ currentPage }} 页</span>
    <button @click="nextPage" :disabled="currentPage >= totalPages">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 },
        // 更多数据...
      ],
      currentPage: 1,
      itemsPerPage: 2
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.tableData.length / this.itemsPerPage);
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      return this.tableData.slice(start, start + this.itemsPerPage);
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.totalPages) this.currentPage++;
    },
    prevPage() {
      if (this.currentPage > 1) this.currentPage--;
    }
  }
};
</script>

使用第三方库（Element UI）

通过 el-table 快速实现高级功能（排序、分页、筛选）。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="ID" sortable></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age" sortable></el-table-column>
  </el-table>
  <el-pagination
    @current-change="handlePageChange"
    :current-page="currentPage"
    :page-size="itemsPerPage"
    :total="tableData.length"
  ></el-pagination>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 }
      ],
      currentPage: 1,
      itemsPerPage: 2
    };
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page;
    }
  }
};
</script>

响应式数据更新

通过 Vue 的响应式特性动态更新表格数据。

<template>
  <table>
    <thead><!-- 表头省略 --></thead>
    <tbody>
      <tr v-for="item in tableData" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
      </tr>
    </tbody>
  </table>
  <button @click="addItem">添加数据</button>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 }
      ]
    };
  },
  methods: {
    addItem() {
      const newId = this.tableData.length + 1;
      this.tableData.push({ id: newId, name: `User${newId}`, age: 20 + newId });
    }
  }
};
</script>