To quickly build a data table in a Vue project, the Element UI library provides a ready‑to‑use el-table component. After adding Element UI to the project, you can define a Vue single‑file component that renders and populates the table.

Integrating Element UI

In the application entry file (typically main.js), import Element UI and its CSS, then register it globally:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

Creating the Table Component

Create a new .vue file, for example StudentsTable.vue, in side the views directory. The component needs three sections: <template>, <script>, and <style>.

In the template, use <el-table> and <el-table-column> to define columns. The data property receives an array of objects, and prop maps each column to a field name:

<template>
  <div>
    <el-table :data="studentList" stripe style="width: 100%">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="fullName" label="Full Name" width="150"></el-table-column>
      <el-table-column prop="grade" label="Grade" width="100"></el-table-column>
      <el-table-column prop="email" label="Email Address"></el-table-column>
    </el-table>
  </div>
</template>

Inside the <script> block, export a default object with a data function that returns the dataset:

<script>
export default {
  data() {
    return {
      studentList: [
        { id: 1, fullName: 'Alice Johnson', grade: 'A', email: 'alice@example.com' },
        { id: 2, fullName: 'Bob Williams', grade: 'B+', email: 'bob@example.com' },
        { id: 3, fullName: 'Catherine Lee', grade: 'A-', email: 'catherine@example.com' },
        { id: 4, fullName: 'David Brown', grade: 'C', email: 'david@example.com' }
      ]
    };
  }
};
</script>

Optionally, add some scoped styles:

<style scoped>
.el-table {
  margin-top: 20px;
}
</style>

Mounting the Component

Open the root component App.vue. Import the newly created table component and include it in the template:

<template>
  <div id="app">
    <StudentsTable />
  </div>
</template>

<script>
import StudentsTable from './views/StudentsTable.vue';

export default {
  components: { StudentsTable }
};
</script>

Start the development server with npm run serve (or yarn serve). The browser will display the table populated with the specified student records. You can adjust column definitions and data to match you're own requirements, following the patterns shown in the Element UI documentation.