vue实现表格组件

Vue 表格组件实现方法

基础表格实现

使用 Vue 的模板语法可以快速实现基础表格功能。通过 v-for 指令循环渲染表格数据。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="col in columns" :key="col.key">{{ col.title }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in data" :key="index">
        <td v-for="col in columns" :key="col.key">{{ row[col.key] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    columns: Array,
    data: Array
  }
}
</script>

添加排序功能

为表格添加点击表头排序的功能，通过计算属性处理排序逻辑。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="col in columns" :key="col.key" @click="sortBy(col.key)">
          {{ col.title }}
          <span v-if="sortKey === col.key">{{ sortOrder > 0 ? '↑' : '↓' }}</span>
        </th>
      </tr>
    </thead>
    <!-- 表格内容同上 -->
  </table>
</template>

<script>
export default {
  data() {
    return {
      sortKey: '',
      sortOrder: 1
    }
  },
  methods: {
    sortBy(key) {
      this.sortKey = key
      this.sortOrder = this.sortKey === key ? -this.sortOrder : 1
    }
  },
  computed: {
    sortedData() {
      return [...this.data].sort((a, b) => {
        return a[this.sortKey] > b[this.sortKey] ? this.sortOrder : -this.sortOrder
      })
    }
  }
}
</script>

分页功能实现

结合分页组件实现表格数据的分页展示。

<template>
  <div>
    <!-- 表格组件 -->
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>{{ currentPage }} / {{ totalPages }}</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.data.length / this.pageSize)
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize
      return this.sortedData.slice(start, start + this.pageSize)
    }
  },
  methods: {
    prevPage() {
      this.currentPage = Math.max(1, this.currentPage - 1)
    },
    nextPage() {
      this.currentPage = Math.min(this.totalPages, this.currentPage + 1)
    }
  }
}
</script>

自定义列渲染

支持通过插槽自定义列内容渲染方式。

<template>
  <table>
    <thead><!-- 表头同上 --></thead>
    <tbody>
      <tr v-for="(row, index) in data" :key="index">
        <td v-for="col in columns" :key="col.key">
          <slot v-if="$scopedSlots[col.key]" :name="col.key" :row="row"></slot>
          <span v-else>{{ row[col.key] }}</span>
        </td>
      </tr>
    </tbody>
  </table>
</template>

使用方式：

<data-table :columns="columns" :data="data">
  <template v-slot:action="{ row }">
    <button @click="handleAction(row)">操作</button>
  </template>
</data-table>

性能优化

对于大数据量的表格，可以使用虚拟滚动技术优化性能。

<template>
  <div class="virtual-table" @scroll="handleScroll">
    <div class="table-header"><!-- 表头 --></div>
    <div class="table-body" :style="{ height: totalHeight }">
      <div v-for="item in visibleData" :key="item.id" :style="{ transform: `translateY(${item.offset}px)` }">
        <!-- 行内容 -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visibleStart: 0,
      visibleCount: 20,
      rowHeight: 40
    }
  },
  computed: {
    visibleData() {
      return this.data.slice(this.visibleStart, this.visibleStart + this.visibleCount)
        .map((item, index) => ({
          ...item,
          offset: (this.visibleStart + index) * this.rowHeight
        }))
    },
    totalHeight() {
      return this.data.length * this.rowHeight + 'px'
    }
  },
  methods: {
    handleScroll(e) {
      const scrollTop = e.target.scrollTop
      this.visibleStart = Math.floor(scrollTop / this.rowHeight)
    }
  }
}
</script>