实现一个基于 Vite、Vue 3 和 Element Plus 的表格组件

本文将介绍如何使用 Vite、Vue 3 和 Element Plus 来实现一个简单的表格组件。

安装依赖

首先，我们需要安装以下依赖：

npm install vite @vitejs/plugin-vue vue@next element-plus

创建组件

接下来，我们将创建一个名为 Table.vue 的组件。该组件将从 props 中接收一个表格数据集合，并将其渲染到页面上。

<template>
  <el-table :data="tableData">
    <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label">
    </el-table-column>
  </el-table>
</template>

<script>
import { defineComponent } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';

export default defineComponent({
  name: 'Table',
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    columns: {
      type: Array,
      required: true,
    },
  },
  components: {
    ElTable,
    ElTableColumn,
  },
});
</script>

使用组件

现在，我们可以在我们的应用程序中使用 Table 组件了。在这个例子中，我们将从一个父组件传递给 Table 组件 tableData 和 columns 属性。

<template>
  <Table :tableData="tableData" :columns="columns" />
</template>

<script>
import { defineComponent } from 'vue';
import Table from './Table.vue';

export default defineComponent({
  name: 'App',
  components: {
    Table,
  },
  data() {
    return {
      tableData: [
        {
          name: 'John Doe',
          age: 30,
          location: 'New York',
        },
        {
          name: 'Jane Smith',
          age: 25,
          location: 'San Francisco',
        },
        {
          name: 'Bob Johnson',
          age: 45,
          location: 'Chicago',
        },
      ],
      columns: [
        {
          label: 'Name',
          prop: 'name',
        },
        {
          label: 'Age',
          prop: 'age',
        },
        {
          label: 'Location',
          prop: 'location',
        },
      ],
    };
  },
});
</script>

现在，我们已经成功地创建了一个基于 Vite、Vue 3 和 Element Plus 的表格组件！