element ui table

Element UI is a popular Vue.js UI library that provides a wide range of reusable and customizable UI components. One of these components is the table component, which allows developers to display data in a tabular format.

To use the Element UI table component, you first need to install the Element UI library and import the necessary components in your project. Once you have done that, you can create a table by defining the columns and the data that you want to display.

Here is an example of a basic Element UI table:

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="age" label="Age"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          { name: 'John', age: 35, address: '123 Main St' },
          { name: 'Jane', age: 28, address: '456 Elm St' },
          { name: 'Bob', age: 42, address: '789 Oak St' }
        ]
      }
    }
  }
</script>

In this example, we define a table with three columns: Name, Age, and Address. We also define an array of objects that represent the data that we want to display in the table. The `prop` attribute of each column specifies the key in the data object that corresponds to that column.

There are many customization options available for the Element UI table component, such as sorting, filtering, pagination, and row selection. You can also use slots to customize the appearance of the table or add custom functionality.