vue表格组件实现

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 items" :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'],
      items: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 }
      ]
    }
  }
}
</script>

使用第三方组件库

Element UI 和 Ant Design Vue 等流行库提供了功能丰富的表格组件。

Element UI 示例：

<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="Date"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-01-01', name: 'John', address: 'New York' }
      ]
    }
  }
}
</script>

自定义可排序表格

通过计算属性实现排序功能：

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

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 }
      ],
      sortKey: '',
      sortOrder: 1
    }
  },
  computed: {
    sortedItems() {
      if (!this.sortKey) return this.items
      return [...this.items].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>

分页功能实现

结合分页组件实现数据分页展示：

<template>
  <div>
    <table>
      <!-- 表格内容 -->
    </table>
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">Previous</button>
      <span>Page {{ currentPage }} of {{ totalPages }}</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [...], // 所有数据
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    paginatedItems() {
      const start = (this.currentPage - 1) * this.pageSize
      return this.items.slice(start, start + this.pageSize)
    },
    totalPages() {
      return Math.ceil(this.items.length / this.pageSize)
    }
  },
  methods: {
    prevPage() { this.currentPage-- },
    nextPage() { this.currentPage++ }
  }
}
</script>

高级功能实现

对于复杂需求，可以考虑以下增强功能：

• 虚拟滚动：处理大数据量渲染性能问题
• 列固定：实现横向滚动时固定重要列
• 树形表格：展示层级数据结构
• 单元格编辑：支持行内编辑功能

<template>
  <table>
    <tr v-for="item in items" :key="item.id">
      <td v-for="col in columns" :key="col.key">
        <template v-if="col.editable">
          <input v-model="item[col.key]" @blur="saveEdit(item)">
        </template>
        <template v-else>
          {{ item[col.key] }}
        </template>
      </td>
    </tr>
  </table>
</template>

<script>
export default {
  methods: {
    saveEdit(item) {
      // 发送API请求保存修改
    }
  }
}
</script>

以上方法涵盖了从基础到高级的Vue表格实现方案，可根据项目需求选择合适的实现方式。对于复杂业务场景，建议优先考虑成熟的UI组件库，以节省开发时间。