当前位置：首页 > VUE

纯vue实现表格

2026-02-19 05:37:01VUE

纯 Vue 实现表格的方法

基础表格结构

使用 Vue 的模板语法直接渲染表格数据。通过 v-for 指令动态生成表格行和列。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in rows" :key="index">
        <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
      </tr>
    </tbody>
  </table>
</template>

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

动态数据绑定

通过 v-model 实现表格数据的双向绑定，适用于可编辑表格场景。

<template>
  <table>
    <tbody>
      <tr v-for="(row, index) in rows" :key="index">
        <td v-for="(cell, cellIndex) in row" :key="cellIndex">
          <input v-model="rows[index][cellIndex]" type="text">
        </td>
      </tr>
    </tbody>
  </table>
</template>

表格排序功能

通过计算属性实现客户端排序，点击表头时切换排序方式。

<template>
  <table>
    <thead>
      <tr>
        <th 
          v-for="header in headers" 
          :key="header.key"
          @click="sortBy(header.key)"
        >
          {{ header.text }}
          <span v-if="sortKey === header.key">
            {{ sortOrder > 0 ? '↑' : '↓' }}
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in sortedRows" :key="row.id">
        <td v-for="header in headers" :key="header.key">{{ row[header.key] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      sortKey: '',
      sortOrder: 1,
      headers: [
        { text: '姓名', key: 'name' },
        { text: '年龄', key: 'age' }
      ],
      rows: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 }
      ]
    };
  },
  computed: {
    sortedRows() {
      const key = this.sortKey;
      if (!key) return this.rows;

      return [...this.rows].sort((a, b) => {
        return (a[key] > b[key] ? 1 : -1) * this.sortOrder;
      });
    }
  },
  methods: {
    sortBy(key) {
      if (this.sortKey === key) {
        this.sortOrder *= -1;
      } else {
        this.sortKey = key;
        this.sortOrder = 1;
      }
    }
  }
};
</script>

分页功能

结合分页逻辑实现表格数据的分段显示。

<template>
  <div>
    <table>
      <!-- 表格内容 -->
    </table>
    <div class="pagination">
      <button 
        v-for="page in totalPages" 
        :key="page"
        @click="currentPage = page"
      >
        {{ page }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      allData: [] // 所有数据
    };
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      return this.allData.slice(start, start + this.pageSize);
    },
    totalPages() {
      return Math.ceil(this.allData.length / this.pageSize);
    }
  }
};
</script>

表格筛选功能

通过输入框实现表格数据的实时筛选。

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索...">
    <table>
      <tbody>
        <tr v-for="row in filteredRows" :key="row.id">
          <td v-for="header in headers" :key="header.key">{{ row[header.key] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      rows: [] // 原始数据
    };
  },
  computed: {
    filteredRows() {
      const query = this.searchQuery.toLowerCase();
      return this.rows.filter(row => {
        return Object.values(row).some(
          val => String(val).toLowerCase().includes(query)
        );
      });
    }
  }
};
</script>