vue 实现table组件

Vue 实现 Table 组件

基础表格实现

使用 Vue 的 v-for 指令可以轻松渲染表格数据。以下是一个基础表格的实现示例：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in data" :key="index">
        <td v-for="(value, key) in row" :key="key">{{ value }}</td>
      </tr>
    </tbody>
  </table>
</template>

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

添加排序功能

通过添加排序方法，可以实现表格列的升序和降序排列：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" :key="header" @click="sortBy(header)">
          {{ header }}
          <span v-if="sortKey === header">{{ sortOrder > 0 ? '↑' : '↓' }}</span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in sortedData" :key="index">
        <td v-for="(value, key) in row" :key="key">{{ value }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    headers: Array,
    data: Array
  },
  data() {
    return {
      sortKey: '',
      sortOrder: 1
    }
  },
  computed: {
    sortedData() {
      if (!this.sortKey) return this.data
      return [...this.data].sort((a, b) => {
        const valueA = a[this.sortKey]
        const valueB = b[this.sortKey]
        return this.sortOrder * (valueA > valueB ? 1 : -1)
      })
    }
  },
  methods: {
    sortBy(key) {
      if (this.sortKey === key) {
        this.sortOrder *= -1
      } else {
        this.sortKey = key
        this.sortOrder = 1
      }
    }
  }
}
</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 {
  props: {
    headers: Array,
    data: Array,
    itemsPerPage: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      currentPage: 1
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.data.length / this.itemsPerPage)
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      const end = start + this.itemsPerPage
      return this.sortedData.slice(start, end)
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) this.currentPage--
    },
    nextPage() {
      if (this.currentPage < this.totalPages) this.currentPage++
    }
  }
}
</script>

添加筛选功能

实现基于关键词的表格数据筛选：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索..." />
    <table>
      <!-- 表格内容同上 -->
    </table>
  </div>
</template>

<script>
export default {
  props: {
    headers: Array,
    data: Array
  },
  data() {
    return {
      searchQuery: ''
    }
  },
  computed: {
    filteredData() {
      if (!this.searchQuery) return this.data
      const query = this.searchQuery.toLowerCase()
      return this.data.filter(row => {
        return Object.values(row).some(value => 
          String(value).toLowerCase().includes(query)
        )
      })
    }
  }
}
</script>

添加行选择功能

实现多行选择和全选功能：

<template>
  <table>
    <thead>
      <tr>
        <th>
          <input type="checkbox" v-model="selectAll" @change="toggleAll" />
        </th>
        <!-- 其他表头 -->
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in data" :key="index">
        <td>
          <input 
            type="checkbox" 
            v-model="selectedRows" 
            :value="row.id" 
            @change="updateSelectAll"
          />
        </td>
        <!-- 其他单元格 -->
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    data: Array
  },
  data() {
    return {
      selectedRows: [],
      selectAll: false
    }
  },
  methods: {
    toggleAll() {
      this.selectedRows = this.selectAll 
        ? this.data.map(row => row.id) 
        : []
    },
    updateSelectAll() {
      this.selectAll = this.selectedRows.length === this.data.length
    }
  }
}
</script>

响应式设计

添加响应式样式，使表格在不同设备上表现良好：

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f2f2f2;
  cursor: pointer;
}

@media screen and (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto;
  }
}
</style>

以上实现展示了 Vue 表格组件的基本功能，可以根据实际需求进行组合和扩展。对于更复杂的需求，可以考虑使用现成的表格组件库如 Element UI 的 ElTable 或 Vuetify 的 v-data-table。