vue 实现表格渲染

Vue 实现表格渲染的方法

基础表格渲染

使用 v-for 指令循环渲染表格数据，结合 Vue 的数据绑定特性动态生成表格内容。

<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="header in headers" :key="header">{{ item[header] }}</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>

动态属性绑定

通过计算属性或方法动态处理表格数据，实现排序、筛选等功能。

<template>
  <table>
    <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: 'age'
    }
  },
  computed: {
    sortedItems() {
      return [...this.items].sort((a, b) => a[this.sortKey] - b[this.sortKey])
    }
  }
}
</script>

使用组件化表格

将表格拆分为可复用的组件，提高代码的可维护性。

<template>
  <data-table :headers="headers" :items="items" />
</template>

<script>
import DataTable from './DataTable.vue'

export default {
  components: { DataTable },
  data() {
    return {
      headers: ['name', 'age'],
      items: [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 }
      ]
    }
  }
}
</script>

第三方表格组件

集成成熟的表格组件库如 Element UI、Vuetify 或 Ant Design Vue。

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

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: 'John', address: 'New York' },
        { date: '2016-05-04', name: 'Jane', address: 'London' }
      ]
    }
  }
}
</script>

虚拟滚动优化

对于大数据量表格，使用虚拟滚动技术提升性能。

<template>
  <vue-virtual-scroller
    class="scroller"
    :items="items"
    :item-height="50"
    key-field="id"
  >
    <template v-slot="{ item }">
      <div class="item">
        <span>{{ item.name }}</span>
        <span>{{ item.age }}</span>
      </div>
    </template>
  </vue-virtual-scroller>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

export default {
  components: { RecycleScroller },
  data() {
    return {
      items: Array.from({ length: 1000 }, (_, i) => ({
        id: i,
        name: `Item ${i}`,
        age: Math.floor(Math.random() * 50)
      }))
    }
  }
}
</script>

以上方法涵盖了从基础到高级的 Vue 表格实现方案，可根据项目需求选择合适的方式。