vue表格的实现

Vue 表格的实现方法

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

使用原生 HTML 表格

通过 Vue 的数据绑定和循环指令，可以轻松实现动态表格渲染。以下是一个基本示例：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="column in columns" :key="column">{{ column }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in data" :key="item.id">
        <td v-for="column in columns" :key="column">{{ item[column] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      columns: ['id', 'name', 'age'],
      data: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 }
      ]
    }
  }
}
</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: '2016-05-02',
        name: 'John',
        address: 'New York'
      }, {
        date: '2016-05-04',
        name: 'Jane',
        address: 'London'
      }]
    }
  }
}
</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' }
      ],
      desserts: [
        { name: 'Frozen Yogurt', calories: 159 },
        { name: 'Ice cream', calories: 237 }
      ]
    }
  }
}
</script>

自定义表格组件

对于更复杂的需求，可以创建自定义表格组件：

<template>
  <div class="custom-table">
    <table>
      <thead>
        <slot name="header"></slot>
      </thead>
      <tbody>
        <tr v-for="(item, index) in data" :key="index">
          <slot :row="item"></slot>
        </tr>
      </tbody>
    </table>
  </div>
</template>

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

实现表格分页

为表格添加分页功能：

<template>
  <div>
    <table>...</table>
    <div class="pagination">
      <button @click="prevPage">Previous</button>
      <span>Page {{ currentPage }} of {{ totalPages }}</span>
      <button @click="nextPage">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      itemsPerPage: 10,
      allItems: [...]
    }
  },
  computed: {
    paginatedItems() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      return this.allItems.slice(start, start + this.itemsPerPage)
    },
    totalPages() {
      return Math.ceil(this.allItems.length / this.itemsPerPage)
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) this.currentPage--
    },
    nextPage() {
      if (this.currentPage < this.totalPages) this.currentPage++
    }
  }
}
</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: [...],
      sortKey: '',
      sortOrder: 1
    }
  },
  computed: {
    sortedItems() {
      return [...this.items].sort((a, b) => {
        if (a[this.sortKey] < b[this.sortKey]) return -1 * this.sortOrder
        if (a[this.sortKey] > b[this.sortKey]) return 1 * this.sortOrder
        return 0
      })
    }
  },
  methods: {
    sortBy(key) {
      if (this.sortKey === key) {
        this.sortOrder *= -1
      } else {
        this.sortKey = key
        this.sortOrder = 1
      }
    }
  }
}
</script>

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