利用VUE3，轻松创建仿Ant-Vue的Table组件，基础实现篇

2023-11-08 02:55:48

前言

在日常开发中，我们经常需要使用表格来展示数据，而Ant-Vue作为一套成熟的UI框架，提供了丰富的表格组件，满足了各种表格需求。然而，在某些情况下，我们可能需要在不使用UI框架的情况下封装一个简单的表格。

使用VUE3封装仿Ant-Vue的Table组件

为了实现这个目标，我们将会使用VUE3，这是一种渐进式的JavaScript框架，具有更快的渲染速度、更小的代码体积以及更好的响应式系统。

准备工作

在开始之前，我们需要确保已安装了VUE3和SCSS。你可以通过如下命令进行安装：

npm install vue@next --save
npm install sass-loader node-sass --save-dev

创建项目

现在，我们可以创建一个新的VUE3项目，可以使用以下命令：

vue create table-component

构建Table组件

接下来，让我们开始构建Table组件。首先，在src目录下创建一个名为Table.vue的文件，并将以下代码复制进去：

<template>
  <div class="table-wrapper">
    <table class="table">
      <thead>
        <tr>
          <th v-for="column in columns" :key="column.key">{{ column.title }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in data" :key="item.id">
          <td v-for="column in columns" :key="column.key">{{ item[column.key] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      required: true
    },
    data: {
      type: Array,
      required: true
    }
  }
}
</script>

<style lang="scss">
.table-wrapper {
  overflow: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px;
  border: 1px solid #ddd;
}
</style>

在这个组件中，我们定义了两个属性，columns和data，用于接收表格的列信息和数据。然后，我们在HTML模板中使用v-for指令循环输出列和数据，并在样式表中定义了表格的样式。

使用Table组件

现在，我们可以将Table组件导入到我们的应用程序中，并在模板中使用它。例如，在App.vue文件中，我们可以添加以下代码：

<template>
  <div id="app">
    <h1>Table组件示例</h1>
    <Table :columns="columns" :data="data" />
  </div>
</template>

<script>
import Table from './components/Table.vue';

export default {
  components: {
    Table
  },
  data() {
    return {
      columns: [
        {
          key: 'name',
          title: '姓名'
        },
        {
          key: 'age',
          title: '年龄'
        }
      ],
      data: [
        {
          id: 1,
          name: 'John Doe',
          age: 30
        },
        {
          id: 2,
          name: 'Jane Doe',
          age: 25
        }
      ]
    };
  }
};
</script>