vue2.0 实现table

Vue 2.0 实现 Table 组件

基础表格实现

使用 v-for 指令渲染表格数据，绑定动态数据到表格的行和列。

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

<script>
export default {
  data() {
    return {
      headers: ['Name', 'Age', 'Email'],
      tableData: [
        ['John', 25, 'john@example.com'],
        ['Jane', 30, 'jane@example.com']
      ]
    };
  }
};
</script>

动态绑定数据

通过 props 接收外部传入的数据，实现表格的动态渲染。

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

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

添加排序功能

通过计算属性实现表格数据的排序功能。

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

<script>
export default {
  data() {
    return {
      sortKey: '',
      sortOrder: 1
    };
  },
  props: {
    headers: {
      type: Array,
      required: true
    },
    data: {
      type: Array,
      required: true
    }
  },
  computed: {
    sortedData() {
      if (!this.sortKey) return this.data;
      const index = this.headers.indexOf(this.sortKey);
      return [...this.data].sort((a, b) => {
        if (a[index] < b[index]) return -1 * this.sortOrder;
        if (a[index] > b[index]) return 1 * this.sortOrder;
        return 0;
      });
    }
  },
  methods: {
    sortTable(header) {
      if (this.sortKey === header) {
        this.sortOrder *= -1;
      } else {
        this.sortKey = header;
        this.sortOrder = 1;
      }
    }
  }
};
</script>

添加分页功能

通过计算属性实现表格的分页功能。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rowIndex) in paginatedData" :key="rowIndex">
          <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
        </tr>
      </tbody>
    </table>
    <div>
      <button @click="prevPage" :disabled="currentPage === 1">Previous</button>
      <span>{{ currentPage }} / {{ totalPages }}</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      itemsPerPage: 2
    };
  },
  props: {
    headers: {
      type: Array,
      required: true
    },
    data: {
      type: Array,
      required: true
    }
  },
  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.data.slice(start, end);
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    }
  }
};
</script>

使用第三方库

对于更复杂的需求，可以使用第三方库如 Element UI 或 Vuetify。

<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>

注意事项

• 确保 key 的唯一性，避免渲染性能问题。
• 对于大数据量的表格，考虑使用虚拟滚动技术优化性能。
• 表格样式可以通过 CSS 自定义，或使用第三方库的默认样式。