用vue实现表格

使用Vue实现表格

在Vue中实现表格可以通过多种方式完成，包括使用原生HTML表格、第三方组件库或自定义组件。以下是几种常见的方法：

原生HTML表格

使用Vue的数据绑定功能，可以轻松渲染动态表格数据。以下是一个简单的例子：

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

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

使用Element UI表格组件

Element UI提供了功能丰富的表格组件，支持排序、分页、筛选等功能：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180"></el-table-column>
    <el-table-column prop="name" label="Name" width="180"></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: 'Alice', address: 'New York' },
        { date: '2023-01-02', name: 'Bob', address: 'London' },
        { date: '2023-01-03', name: 'Charlie', address: 'Sydney' }
      ]
    }
  }
}
</script>

使用Vuetify数据表格

Vuetify也提供了强大的数据表格组件，支持多种交互功能：

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  ></v-data-table>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: 'Dessert', value: 'name' },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' }
      ],
      desserts: [
        { name: 'Frozen Yogurt', calories: 159, fat: 6.0 },
        { name: 'Ice cream sandwich', calories: 237, fat: 9.0 }
      ]
    }
  }
}
</script>

自定义可编辑表格

对于需要编辑功能的表格，可以结合Vue的双向绑定特性：

<template>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(person, index) in people" :key="index">
        <td><input v-model="person.name" /></td>
        <td><input v-model.number="person.age" type="number" /></td>
        <td><button @click="removePerson(index)">Delete</button></td>
      </tr>
    </tbody>
  </table>
  <button @click="addPerson">Add Person</button>
</template>

<script>
export default {
  data() {
    return {
      people: [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 }
      ]
    }
  },
  methods: {
    addPerson() {
      this.people.push({ name: '', age: 0 })
    },
    removePerson(index) {
      this.people.splice(index, 1)
    }
  }
}
</script>

表格性能优化

对于大型数据集，可以使用虚拟滚动技术提高性能：

<template>
  <RecycleScroller
    class="scroller"
    :items="bigData"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="row">
      <span>{{ item.id }}</span>
      <span>{{ item.name }}</span>
      <span>{{ item.value }}</span>
    </div>
  </RecycleScroller>
</template>

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

export default {
  components: { RecycleScroller },
  data() {
    return {
      bigData: Array(10000).fill().map((_, i) => ({
        id: i,
        name: `Item ${i}`,
        value: Math.random()
      }))
    }
  }
}
</script>