本文将介绍如何使用 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 的表格组件!