vue实现简单表格

Vue 实现简单表格的方法

基础表格实现

使用 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 rows" :key="index">
        <td v-for="(value, key) in row" :key="key">{{ value }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      headers: ['姓名', '年龄', '职业'],
      rows: [
        { 姓名: '张三', 年龄: 25, 职业: '工程师' },
        { 姓名: '李四', 年龄: 30, 职业: '设计师' }
      ]
    }
  }
}
</script>

添加样式和交互

为表格添加基础样式和点击事件：

<template>
  <table class="vue-table">
    <thead>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr 
        v-for="(row, index) in rows" 
        :key="index"
        @click="selectRow(index)"
        :class="{ 'selected': selectedRow === index }"
      >
        <td v-for="(value, key) in row" :key="key">{{ value }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      headers: ['姓名', '年龄', '职业'],
      rows: [
        { 姓名: '张三', 年龄: 25, 职业: '工程师' },
        { 姓名: '李四', 年龄: 30, 职业: '设计师' }
      ],
      selectedRow: null
    }
  },
  methods: {
    selectRow(index) {
      this.selectedRow = index
    }
  }
}
</script>

<style>
.vue-table {
  width: 100%;
  border-collapse: collapse;
}
.vue-table th, .vue-table td {
  border: 1px solid #ddd;
  padding: 8px;
}
.vue-table tr:hover {
  background-color: #f5f5f5;
}
.vue-table .selected {
  background-color: #e0e0e0;
}
</style>

使用组件化方式

将表格封装为可复用组件：

<!-- TableComponent.vue -->
<template>
  <table class="vue-table">
    <thead>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <slot name="body" :rows="rows"></slot>
    </tbody>
  </table>
</template>

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

使用该组件：

<template>
  <TableComponent :headers="headers" :rows="rows">
    <template #body="{ rows }">
      <tr v-for="(row, index) in rows" :key="index">
        <td v-for="(value, key) in row" :key="key">{{ value }}</td>
      </tr>
    </template>
  </TableComponent>
</template>

<script>
import TableComponent from './TableComponent.vue'

export default {
  components: {
    TableComponent
  },
  data() {
    return {
      headers: ['姓名', '年龄', '职业'],
      rows: [
        { 姓名: '张三', 年龄: 25, 职业: '工程师' },
        { 姓名: '李四', 年龄: 30, 职业: '设计师' }
      ]
    }
  }
}
</script>

添加排序功能

实现表格列的排序功能：

<template>
  <table class="vue-table">
    <thead>
      <tr>
        <th 
          v-for="header in headers" 
          :key="header.key"
          @click="sortBy(header.key)"
        >
          {{ header.label }}
          <span v-if="sortKey === header.key">
            {{ sortOrder > 0 ? '↑' : '↓' }}
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in sortedRows" :key="row.id">
        <td v-for="header in headers" :key="header.key">{{ row[header.key] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { key: 'name', label: '姓名' },
        { key: 'age', label: '年龄' },
        { key: 'job', label: '职业' }
      ],
      rows: [
        { id: 1, name: '张三', age: 25, job: '工程师' },
        { id: 2, name: '李四', age: 30, job: '设计师' }
      ],
      sortKey: '',
      sortOrder: 1
    }
  },
  computed: {
    sortedRows() {
      if (!this.sortKey) return this.rows
      return [...this.rows].sort((a, b) => {
        const aVal = a[this.sortKey]
        const bVal = b[this.sortKey]
        return (aVal > bVal ? 1 : -1) * this.sortOrder
      })
    }
  },
  methods: {
    sortBy(key) {
      if (this.sortKey === key) {
        this.sortOrder *= -1
      } else {
        this.sortKey = key
        this.sortOrder = 1
      }
    }
  }
}
</script>

使用第三方库

对于更复杂的需求，可以考虑使用专门的表格库如 Element UI 或 Vuetify：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="job" label="职业"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, job: '工程师' },
        { name: '李四', age: 30, job: '设计师' }
      ]
    }
  }
}
</script>

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