Element-plus安装与引入部分，基本用法，垂直菜单

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
题目1：Element-plus安装

1.

2.

题目2：在main.js文件中所需引入的有那些

题目3：Element-plus基本用法示例

1.

2.

3.

题目4：Element-plus中的垂直菜单

1.

2.

3.

题目5：前台手动输入数据，后台控制台显示文件：

1.user.vue文件：

  1. <template>
  2.     <div style="margin:0 0 20px 0;">
  3.       <el-button type="success" size="large">添加</el-button>
  4.     </div>
  5.     <el-table :data="tableData" border style="width: 100%" size="large">
  6.       <el-table-column prop="uid" label="ID" />
  7.       <el-table-column prop="account" label="账号" />
  8.       <el-table-column prop="name" label="姓名" />
  9.       <el-table-column prop="phone" label="手机号" />
  10.       <el-table-column prop="status" label="状态" />
  11.       <el-table-column prop="add_time" label="入职时间" />
  12.       <el-table-column prop="last_time" label="最后登录时间" />
  13.       <el-table-column label="Operations">
  14.         <template #default="scope">
  15.           <el-button size="small" typu="primary">修改</el-button>
  16.           <el-button size="small" type="danger">删除</el-button>
  17.         </template>
  18.       </el-table-column>
  19.     </el-table>
  20.     <el-form :model="fromData" label-width="120px" size="large">
  21.       <el-form-item label="账号">
  22.         <el-input v-model="fromData.account"/>
  23.       </el-form-item>
  24.       <el-form-item label="姓名">
  25.         <el-input v-model="fromData.name"/>
  26.       </el-form-item>
  27.       <el-form-item label="手机号">
  28.         <el-input v-model="fromData.phone"/>
  29.       </el-form-item>
  30.       <el-form-item label="入职时间">
  31.         <el-date-picker
  32.         v-model="fromData.add_time"
  33.         type="date"
  34.         placeholder="Pick a day"
  35.         :size="size"
  36.       />
  37.       </el-form-item>
  38.       <el-button type="success" size="largr" @click="fun">确定</el-button>
  39.     </el-form>
  40.   </template>
  41.   <script setup>
  42.   import {reactive} from 'vue'
  43.   const fromData=reactive({
  44.     account:'',
  45.     name:'',
  46.     phone:'',
  47.     add_time:''
  48.   })
  49.   const tableData = [
  50.     {
  51.      uid:1,
  52.      account:'gyc',
  53.      name:'关云长',
  54.      phone:13588888888,
  55.      status:'在职',
  56.      add_time:'2022年9月5日',
  57.      last_time:'2022年9月6日',
  58.     },
  59.     {
  60.      uid:2,
  61.      account:'zyd',
  62.      name:'张翼德',
  63.      phone:13566666666,
  64.      status:'在职',
  65.      add_time:'2022年9月5日',
  66.      last_time:'2022年9月6日',
  67.     },
  68.     {
  69.       uid:3,
  70.      account:'lxd',
  71.      name:'刘玄德',
  72.      phone:13599999999,
  73.      status:'在职',
  74.      add_time:'2022年9月5日',
  75.      last_time:'2022年9月6日',
  76.     },
  77.     {
  78.       uid:4,
  79.      account:'zzl',
  80.      name:'赵子龙',
  81.      phone:13577777777,
  82.      status:'在职',
  83.      add_time:'2022年9月5日',
  84.      last_time:'2022年9月6日',
  85.     },
  86.   ];
  87.   const fun=()=>{
  88.     console.log(fromData);
  89.   }
  90.   </script>
效果图：

1.

2.

题目6：表单的显示与隐藏

1.

2.

3.

4.

题目7：‘添加’弹窗与‘修改’弹窗

1.

2.

3.

4.

【本文来源：香港将军澳机房 http://www.558idc.com/hk.html 欢迎留下您的宝贵建议】
更多阅读