0906element 安装、后台管理系统页搭建、添加和修改表单

1、element 安装

使用npm命令安装在vue目录内

npm install element-plus --save

import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
}

最后引入一下

use(ElementPlus, { size: "small", zIndex: 3000 }).

2、后台管理系统

首页搭建

列表页搭建添加和修改表单

   <!-- 添加按钮 -->
    <div  class="mb-4">
        <el-button type="primary" size="large" @click="add(0)">添加</el-button>
    </div>
    <el-table :data="tableData.lists" border style="width: 100%" size="default">
        <!-- 表格内容 -->
      <el-table-column prop="uid" label="ID" />
      <el-table-column prop="account" label="帐号" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="status_s" label="状态" />
      <el-table-column prop="add_time" label="入职时间" />
      <el-table-column prop="last_time" label="最后登录时间" />
        <!-- 操作按钮 -->
        <el-table-column label="操作">
            <!-- default 这个是默认的插槽 -->
            <!-- scope 是传值给这个插槽，这个值是什么呢？就是当前这条数据 -->
            <!-- 当数据有多条时，放el-table这个标签里，它会自动循环，每次循环都会把当前的循环值给到el-table -->
            <template #default="scope">
                <!-- @click="handleEdit(scope.$index, scope.row) -->
                <el-button size="small" type="primary" @click="add(scope.row)">修改</el-button>
                <el-button size="small" type="danger"  >删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 弹窗效果 -->
    <el-dialog
    v-model="data.is_from"
    :title="data.title"
    width="30%"
    :before-close="handleClose"    
    >
    <!-- 表单 -->
        <el-form :model="fromData" label-width="120px" size="large" >
            <el-form-item label="帐号">
                <el-input v-model="fromData.account" placeholder="请输入帐号"/>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="fromData.password" type="password" show-password placeholder="data.plac"/>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="fromData.name"/>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="fromData.phone"/>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="fromData.status" placeholder="请选择状态">
                    <el-option label="开启" :value="1" />
                    <el-option label="关闭" :value="0" />
                </el-select>
            </el-form-item>
            <el-form-item label="入职时间">
                <el-date-picker
                    v-model="fromData.add_time"
                    type="date"
                    placeholder="时间"
                    :disabled-date="disabledDate"
                    :shortcuts="shortcuts"
                    :size="size"
                />
            </el-form-item>
            <el-button type="primary" size="large" @click="fun()">确定</el-button>
        </el-form>
    </el-dialog>