当前位置：首页 > VUE

vue实现的表格

2026-02-17 11:45:14VUE

Vue 实现的表格

Vue 中实现表格可以通过多种方式，包括使用原生 HTML 表格、第三方组件库（如 Element UI、Ant Design Vue）或自定义表格组件。以下是几种常见方法：

使用原生 HTML 表格

通过 Vue 的 v-for 指令动态渲染表格数据，适合简单表格需求。

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

<script>
export default {
  data() {
    return {
      headers: ['Name', 'Age', 'Email'],
      data: [
        { id: 1, Name: 'Alice', Age: 25, Email: 'alice@example.com' },
        { id: 2, Name: 'Bob', Age: 30, Email: 'bob@example.com' }
      ]
    };
  }
};
</script>

使用 Element UI 的表格组件

Element UI 提供了功能丰富的表格组件，支持排序、分页、筛选等高级功能。

<template>
  <el-table :data="data" style="width: 100%">
    <el-table-column prop="Name" label="Name" width="180"></el-table-column>
    <el-table-column prop="Age" label="Age" width="180"></el-table-column>
    <el-table-column prop="Email" label="Email"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { Name: 'Alice', Age: 25, Email: 'alice@example.com' },
        { Name: 'Bob', Age: 30, Email: 'bob@example.com' }
      ]
    };
  }
};
</script>

自定义可编辑表格

通过 Vue 的双向绑定实现表格单元格的编辑功能。

<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="row.id">
        <td v-for="header in headers" :key="header">
          <input v-model="row[header]" v-if="editable[index]" />
          <span v-else>{{ row[header] }}</span>
        </td>
        <td>
          <button @click="toggleEdit(index)">
            {{ editable[index] ? 'Save' : 'Edit' }}
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      headers: ['Name', 'Age', 'Email'],
      data: [
        { id: 1, Name: 'Alice', Age: 25, Email: 'alice@example.com' },
        { id: 2, Name: 'Bob', Age: 30, Email: 'bob@example.com' }
      ],
      editable: []
    };
  },
  methods: {
    toggleEdit(index) {
      this.$set(this.editable, index, !this.editable[index]);
    }
  }
};
</script>

使用 Ant Design Vue 的表格

Ant Design Vue 也提供了强大的表格组件，支持自定义渲染和复杂交互。

<template>
  <a-table :columns="columns" :data-source="data" row-key="id">
    <template #action="{ record }">
      <a-button @click="handleEdit(record)">Edit</a-button>
    </template>
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { title: 'Name', dataIndex: 'Name', key: 'Name' },
        { title: 'Age', dataIndex: 'Age', key: 'Age' },
        { title: 'Email', dataIndex: 'Email', key: 'Email' },
        { title: 'Action', key: 'action', slots: { customRender: 'action' } }
      ],
      data: [
        { id: 1, Name: 'Alice', Age: 25, Email: 'alice@example.com' },
        { id: 2, Name: 'Bob', Age: 30, Email: 'bob@example.com' }
      ]
    };
  },
  methods: {
    handleEdit(record) {
      console.log('Edit:', record);
    }
  }
};
</script>

动态加载数据的表格

通过 API 异步加载表格数据，适合处理大量数据。

<template>
  <table v-if="!loading">
    <thead>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in data" :key="row.id">
        <td v-for="header in headers" :key="header">{{ row[header] }}</td>
      </tr>
    </tbody>
  </table>
  <div v-else>Loading...</div>
</template>

<script>
export default {
  data() {
    return {
      headers: ['Name', 'Age', 'Email'],
      data: [],
      loading: true
    };
  },
  async created() {
    try {
      const response = await fetch('https://api.example.com/users');
      this.data = await response.json();
    } catch (error) {
      console.error('Error fetching data:', error);
    } finally {
      this.loading = false;
    }
  }
};
</script>