【实战】使用 Element Plus 实现界面设计

<template>  <el-container style="height: 500px; border: 1px solid #eee">    <el-header style="text-align: right; font-size: 12px">      <el-dropdown>        <i class="el-icon-setting" style="margin-right: 15px"></i>        <template #dropdown>          <el-dropdown-menu>            <el-dropdown-item>查看</el-dropdown-item>            <el-dropdown-item>新建</el-dropdown-item>            <el-dropdown-item>删除</el-dropdown-item>          </el-dropdown-menu>        </template>      </el-dropdown>      <span>王小虎</span>    </el-header>    <el-main>      <!-- 这里是主要内容 -->      <el-table :data="tableData">        <el-table-column prop="date" label="日期" width="180"></el-table-column>        <el-table-column prop="name" label="姓名" width="180"></el-table-column>        <el-table-column prop="address" label="地址"></el-table-column>      </el-table>    </el-main>  </el-container></template> <script setup>import { ref } from 'vue' const tableData = ref([  {    date: '2016-05-02',    name: '王小虎',    address: '上海市普陀区金沙江路 1518 弄'  },  {    date: '2016-05-04',    name: '张小刚',    address: '上海市普陀区金沙江路 1517 弄'  },  {    date: '2016-05-01',    name: '李小红',    address: '上海市普陀区金沙江路 1519 弄'  },  // ...更多数据])</script> <style>.el-header {  background-color: #b3c0d1;  color: var(--el-text-color-primary);  line-height: 60px;} .el-aside {  color: var(--el-text-color-primary);}</style>

这段代码使用了 Element P