Vue-Element快速上手

Element Plus官方网站：一个 Vue 3 UI 框架 | Element Plus (element-plus.org)

安装指令：

$ npm install element-plus --save

简单案例

<script setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
</script>

<template>
  <div>
    <el-table :data="[{
        id:1,
        name:'tom',
        age:20
    },
    {
        id:2,
        name:'w',
        age:20
    },
    {
        id:3,
        name:'d',
        age:20
    },
    {
        id:4,
        name:'a',
        age:20
    },
  ]" border>
    <el-table-column label="ID" prop="id"></el-table-column>
    <el-table-column label="name" prop="name"></el-table-column>
    <el-table-column label="age" prop="age"></el-table-column>
    <el-table-column label="操作" width="200">
        <el-button type="info" size="small">编辑</el-button>
        <el-button type="success" size="small">删除</el-button>
    </el-table-column>
    
    </el-table>
  </div>
</template>

<style scoped>

</style>

结果如下: