表格用vue实现

使用 Vue 实现表格

Vue 可以通过多种方式实现表格功能，包括原生 HTML 表格、第三方组件库（如 Element UI、Vuetify）或自定义组件。以下是几种常见实现方法：

原生 HTML 表格

通过 Vue 的 v-for 指令动态渲染表格数据：

<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 }
      ]
    }
  }
}
</script>

使用 Element UI 表格

Element UI 提供了功能丰富的 el-table 组件：

<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' }
      ]
    }
  }
}
</script>

自定义可编辑表格

实现带有编辑功能的表格：

<template>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in items" :key="index">
        <td>
          <input v-if="item.editing" v-model="item.name" />
          <span v-else>{{ item.name }}</span>
        </td>
        <td>
          <input v-if="item.editing" v-model="item.age" type="number" />
          <span v-else>{{ item.age }}</span>
        </td>
        <td>
          <button @click="toggleEdit(item)">
            {{ item.editing ? 'Save' : 'Edit' }}
          </button>
          <button @click="removeItem(index)">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Alice', age: 25, editing: false },
        { name: 'Bob', age: 30, editing: false }
      ]
    }
  },
  methods: {
    toggleEdit(item) {
      item.editing = !item.editing
    },
    removeItem(index) {
      this.items.splice(index, 1)
    }
  }
}
</script>

使用 Vuetify 数据表格

Vuetify 的 v-data-table 提供高级功能如分页、排序和搜索：

<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', calories: 237, fat: 9.0 }
      ]
    }
  }
}
</script>

实现表格排序

为原生表格添加排序功能：

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

<script>
export default {
  data() {
    return {
      people: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 }
      ],
      sortKey: 'name',
      sortOrder: 1
    }
  },
  computed: {
    sortedPeople() {
      return [...this.people].sort((a, b) => {
        const valA = a[this.sortKey]
        const valB = b[this.sortKey]
        return this.sortOrder * (valA < valB ? -1 : valA > valB ? 1 : 0)
      })
    }
  },
  methods: {
    sortBy(key) {
      if (this.sortKey === key) {
        this.sortOrder *= -1
      } else {
        this.sortKey = key
        this.sortOrder = 1
      }
    }
  }
}
</script>

这些示例展示了从简单到复杂的表格实现方式，可以根据项目需求选择合适的方案。第三方组件库通常提供更多开箱即用的功能，而自定义实现则更加灵活。