纯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="(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, '设计师']
      ]
    }
  }
}
</script>

动态数据绑定

表格数据通常来自 API 或动态计算：

<template>
  <table>
    <tbody>
      <tr v-for="item in apiData" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.value }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      apiData: []
    }
  },
  async created() {
    const response = await fetch('https://api.example.com/data')
    this.apiData = await response.json()
  }
}
</script>

表格功能扩展

实现排序、筛选等交互功能：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索...">
    <table>
      <thead>
        <tr>
          <th @click="sortBy('name')">姓名</th>
          <th @click="sortBy('age')">年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in filteredData" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      sortKey: '',
      sortOrder: 1,
      items: [
        { id: 1, name: '张三', age: 25 },
        { id: 2, name: '李四', age: 30 }
      ]
    }
  },
  computed: {
    filteredData() {
      let data = this.items
      if (this.searchQuery) {
        data = data.filter(item => 
          item.name.includes(this.searchQuery)
        )
      }
      if (this.sortKey) {
        data = [...data].sort((a, b) => {
          return (a[this.sortKey] > b[this.sortKey] ? 1 : -1) * this.sortOrder
        })
      }
      return data
    }
  },
  methods: {
    sortBy(key) {
      this.sortKey = key
      this.sortOrder *= -1
    }
  }
}
</script>

组件化表格

将表格封装为可复用组件：

<!-- TableComponent.vue -->
<template>
  <table>
    <slot name="header"></slot>
    <tbody>
      <tr v-for="(item, index) in data" :key="index">
        <slot :row="item"></slot>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true
    }
  }
}
</script>

<!-- 使用组件 -->
<template>
  <TableComponent :data="tableData">
    <template #header>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
      </thead>
    </template>
    <template #default="{ row }">
      <td>{{ row.name }}</td>
      <td>{{ row.age }}</td>
    </template>
  </TableComponent>
</template>

性能优化

对于大型数据集，使用虚拟滚动：

<template>
  <div class="table-container" @scroll="handleScroll">
    <div class="table-content" :style="{ height: totalHeight + 'px' }">
      <div 
        v-for="item in visibleData" 
        :key="item.id" 
        class="table-row"
        :style="{ transform: `translateY(${item.offset}px)` }"
      >
        <div class="table-cell">{{ item.name }}</div>
        <div class="table-cell">{{ item.value }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allData: [], // 所有数据
      visibleData: [], // 可见数据
      itemHeight: 50,
      viewportHeight: 500,
      scrollTop: 0
    }
  },
  computed: {
    totalHeight() {
      return this.allData.length * this.itemHeight
    }
  },
  methods: {
    updateVisibleData() {
      const start = Math.floor(this.scrollTop / this.itemHeight)
      const end = start + Math.ceil(this.viewportHeight / this.itemHeight)

      this.visibleData = this.allData
        .slice(start, end)
        .map((item, index) => ({
          ...item,
          offset: (start + index) * this.itemHeight
        }))
    },
    handleScroll(e) {
      this.scrollTop = e.target.scrollTop
      this.updateVisibleData()
    }
  }
}
</script>

以上实现方式覆盖了 Vue 表格的基础到高级应用场景，可根据实际需求选择适合的方案。