vue实现单表

Vue 实现单表的方法

在 Vue 中实现单表（如简单的数据表格展示）可以通过多种方式完成，以下是一些常见的方法：

使用原生 HTML 表格

通过 Vue 的数据绑定功能，可以动态渲染表格内容。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.id">
        <td v-for="header in headers" :key="header">{{ item[header] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      headers: ['id', 'name', 'age'],
      items: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 },
      ],
    };
  },
};
</script>

使用第三方表格组件库

许多 Vue 表格组件库（如 Element UI、Vuetify 或 Ant Design Vue）提供了更丰富的功能。

以 Element UI 为例：

<template>
  <el-table :data="items">
    <el-table-column prop="id" label="ID"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 },
      ],
    };
  },
};
</script>

动态生成表格列

如果需要动态生成表格列，可以通过计算属性或方法动态配置列信息。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="col in columns" :key="col.key">{{ col.title }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.id">
        <td v-for="col in columns" :key="col.key">{{ item[col.key] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { key: 'id', title: 'ID' },
        { key: 'name', title: 'Name' },
        { key: 'age', title: 'Age' },
      ],
      items: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 },
      ],
    };
  },
};
</script>

添加交互功能

可以为表格添加排序、分页或筛选功能。

以排序为例：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="col in columns" :key="col.key" @click="sortBy(col.key)">
          {{ col.title }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in sortedItems" :key="item.id">
        <td v-for="col in columns" :key="col.key">{{ item[col.key] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { key: 'id', title: 'ID' },
        { key: 'name', title: 'Name' },
        { key: 'age', title: 'Age' },
      ],
      items: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 },
      ],
      sortKey: '',
      sortOrder: 1, // 1 for ascending, -1 for descending
    };
  },
  computed: {
    sortedItems() {
      if (!this.sortKey) return this.items;
      return [...this.items].sort((a, b) => {
        return (a[this.sortKey] > b[this.sortKey] ? 1 : -1) * this.sortOrder;
      });
    },
  },
  methods: {
    sortBy(key) {
      if (this.sortKey === key) {
        this.sortOrder *= -1;
      } else {
        this.sortKey = key;
        this.sortOrder = 1;
      }
    },
  },
};
</script>

使用 Vue 3 的 Composition API

在 Vue 3 中，可以使用 ref 和 computed 实现表格逻辑。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="col in columns" :key="col.key" @click="sortBy(col.key)">
          {{ col.title }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in sortedItems" :key="item.id">
        <td v-for="col in columns" :key="col.key">{{ item[col.key] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const columns = ref([
      { key: 'id', title: 'ID' },
      { key: 'name', title: 'Name' },
      { key: 'age', title: 'Age' },
    ]);
    const items = ref([
      { id: 1, name: 'Alice', age: 25 },
      { id: 2, name: 'Bob', age: 30 },
    ]);
    const sortKey = ref('');
    const sortOrder = ref(1);

    const sortedItems = computed(() => {
      if (!sortKey.value) return items.value;
      return [...items.value].sort((a, b) => {
        return (a[sortKey.value] > b[sortKey.value] ? 1 : -1) * sortOrder.value;
      });
    });

    const sortBy = (key) => {
      if (sortKey.value === key) {
        sortOrder.value *= -1;
      } else {
        sortKey.value = key;
        sortOrder.value = 1;
      }
    };

    return { columns, sortedItems, sortBy };
  },
};
</script>

以上方法可以根据需求选择，原生表格适合简单场景，而第三方库更适合复杂功能需求。