vue实现table

Vue 实现 Table 的基本方法

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

原生 HTML 表格 在 Vue 模板中直接使用 <table> 标签，结合 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="cell in row.cells" :key="cell.id">{{ cell.value }}</td>
      </tr>
    </tbody>
  </table>
</template>
<script>
export default {
  data() {
    return {
      headers: ['Name', 'Age', 'Email'],
      rows: [
        { id: 1, cells: [{ id: 1, value: 'John' }, { id: 2, value: 25 }, { id: 3, value: 'john@example.com' }] },
        { id: 2, cells: [{ id: 4, value: 'Jane' }, { id: 5, value: 30 }, { id: 6, value: 'jane@example.com' }] }
      ]
    }
  }
}
</script>

使用 Element UI 的 Table 组件 Element UI 提供了功能丰富的表格组件：

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column prop="email" label="Email"></el-table-column>
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 25, email: 'john@example.com' },
        { name: 'Jane', age: 30, email: 'jane@example.com' }
      ]
    }
  }
}
</script>

实现高级表格功能

分页功能 结合分页组件实现数据分页：

<template>
  <div>
    <el-table :data="currentPageData">
      <!-- 表格列定义 -->
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalItems">
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [...],
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    currentPageData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.tableData.slice(start, end)
    },
    totalItems() {
      return this.tableData.length
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

排序功能 添加排序功能可以通过自定义排序方法或使用组件内置排序：

<template>
  <el-table :data="tableData" @sort-change="handleSortChange">
    <el-table-column prop="name" label="Name" sortable></el-table-column>
    <el-table-column prop="age" label="Age" sortable></el-table-column>
  </el-table>
</template>
<script>
export default {
  methods: {
    handleSortChange({ prop, order }) {
      this.tableData.sort((a, b) => {
        if (order === 'ascending') {
          return a[prop] > b[prop] ? 1 : -1
        } else {
          return a[prop] < b[prop] ? 1 : -1
        }
      })
    }
  }
}
</script>

性能优化建议

对于大数据量表格，考虑使用虚拟滚动技术避免渲染所有行：

<template>
  <virtual-list :size="50" :remain="10" :data="largeData">
    <table>
      <tr v-for="item in largeData" :key="item.id">
        <td>{{ item.name }}</td>
      </tr>
    </table>
  </virtual-list>
</template>

表格数据更新时使用 key 属性帮助 Vue 高效更新 DOM：

<tr v-for="item in items" :key="item.id">
  <!-- 单元格内容 -->
</tr>

自定义表格组件

创建可复用的表格组件：

<!-- TableComponent.vue -->
<template>
  <table>
    <thead>
      <slot name="header"></slot>
    </thead>
    <tbody>
      <slot name="body" v-for="item in data" :item="item"></slot>
    </tbody>
  </table>
</template>
<script>
export default {
  props: ['data']
}
</script>

<!-- 使用 -->
<table-component :data="tableData">
  <template #header>
    <tr>
      <th>Name</th>
    </tr>
  </template>
  <template #body="{ item }">
    <tr>
      <td>{{ item.name }}</td>
    </tr>
  </template>
</table-component>