vue实现的表格

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

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

使用 Element UI 的表格组件

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

<template>
  <el-table :data="tableData" 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 {
      tableData: [
        { name: 'Alice', age: 25, email: 'alice@example.com' },
        { name: 'Bob', age: 30, email: 'bob@example.com' }
      ]
    };
  }
};
</script>

使用 Ant Design Vue 的表格组件

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

<template>
  <a-table :columns="columns" :data-source="data" />
</template>

<script>
const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Email', dataIndex: 'email', key: 'email' }
];

const data = [
  { key: '1', name: 'Alice', age: 25, email: 'alice@example.com' },
  { key: '2', name: 'Bob', age: 30, email: 'bob@example.com' }
];

export default {
  data() {
    return { columns, data };
  }
};
</script>

自定义表格组件

如果需要更灵活的控制，可以自定义表格组件，例如支持动态列和自定义单元格渲染。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="column in columns" :key="column.key">{{ column.title }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in data" :key="index">
          <td v-for="column in columns" :key="column.key">
            {{ column.render ? column.render(row) : row[column.key] }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

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

动态表格数据绑定

通过 Vue 的响应式特性，可以动态更新表格数据。

<template>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(person, index) in people" :key="index">
        <td>{{ person.name }}</td>
        <td>{{ person.age }}</td>
      </tr>
    </tbody>
  </table>
  <button @click="addPerson">Add Person</button>
</template>

<script>
export default {
  data() {
    return {
      people: [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 }
      ]
    };
  },
  methods: {
    addPerson() {
      this.people.push({ name: 'Charlie', age: 35 });
    }
  }
};
</script>

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