vue table组件实现

Vue 表格组件实现方案

基础表格实现

使用<table>标签结合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>

使用第三方组件库

Element UI的表格组件提供丰富功能：

<template>
  <el-table :data="tableData">
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

Ant Design Vue表格组件实现：

<template>
  <a-table :columns="columns" :data-source="data">
    <template #action="{ record }">
      <a @click="handleEdit(record)">编辑</a>
    </template>
  </a-table>
</template>

自定义高级功能

实现可排序表格：

<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>
    <tbody>
      <tr v-for="row in sortedData" :key="row.id">
        <td v-for="col in columns" :key="col.key">{{ row[col.key] }}</td>
      </tr>
    </tbody>
  </table>
</template>

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

虚拟滚动优化

处理大数据量时使用虚拟滚动：

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

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

表格分页实现

<template>
  <div>
    <table><!-- 表格内容 --></table>
    <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: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize
      return this.data.slice(start, start + this.pageSize)
    },
    totalPages() {
      return Math.ceil(this.data.length / this.pageSize)
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) this.currentPage--
    },
    nextPage() {
      if (this.currentPage < this.totalPages) this.currentPage++
    }
  }
}
</script>

响应式表格设计

使用CSS媒体查询实现响应式：

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }
  table thead {
    display: none;
  }
  table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
  }
  table td {
    display: block;
    text-align: right;
    border-bottom: 1px solid #eee;
  }
  table td::before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}