Element-UI

小咪咪 2024-03-22 13:33 95阅读 0赞

**目录**

Layout 布局

按钮组件结合 el-icon 使用

单选框

复选框

日期组件

表格

分页

对话框

表单验证

--------------------

Element-UI是由饿了么前端团队开发的一套基于Vue.js的桌面端组件库，包含了多个常用的UI组件，如按钮、输入框、表格、弹窗等，可以快速地搭建一个现代化的Web应用程序。[一个 Vue 3 UI 框架 | Element Plus (gitee.io)![icon-default.png_t_N3I4][]https://element-plus.gitee.io/zh-CN/][Vue 3 UI _ _ Element Plus _gitee.io_icon-default.png_t_N3I4_https_element-plus.gitee.io_zh-CN]

//注册Element-UI插件
    import ElementUI from 'element-plus';
    import 'element-plus/theme-chalk/index.css';
    //注册Element Plus的图标组件
    import * as ElIcons from '@element-plus/icons-vue'
    const app = createApp(App);
    for(const iconName in  ElIcons){
        app.component(iconName,ElIcons[iconName]);
    }
    //本地化语言为中文
    import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
    app.use(router).use(ElementUI, {
        locale: zhCn,
    }).mount("#app");

## Layout 布局 ##

通过基础的 24 分栏，迅速简便地创建布局。

网格分栏中可以继续嵌套

<el-row>
          <el-col :span="6">网格1</el-col>
    
          <el-col :span="18">
            <el-row>
              <el-col :span="10">网格2.1</el-col>
              <el-col :span="14">网格2.2</el-col>
            </el-row>
          </el-col>
        </el-row>

## 按钮组件结合 el-icon 使用 ##

<el-button type="primary">添加<el-icon><Plus /></el-icon></el-button>
       <el-button type="danger">删除<el-icon><DeleteFilled /></el-icon></el-button>
       <el-button type="info">修改<el-icon><Edit /></el-icon></el-button>
       <el-button type="success">查询<el-icon><Search /></el-icon></el-button>

## 单选框 ##

<el-radio-group v-model="sex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
            <el-radio label="不限">不限</el-radio>
          </el-radio-group>

## 复选框 ##

<el-checkbox-group v-model="checkList">
          <el-checkbox label="唱" />
          <el-checkbox label="跳" />
          <el-checkbox label="rap" />
          <el-checkbox label="篮球" disabled />
      </el-checkbox-group>

lable相当于单选框的value属性，如果值为中文，注意把lable冒号去掉，或者用单引号引起来

## 下拉框 ##

//把值双向绑定到findObj对象的status属性上
              <el-select v-model="findObj.status" placeholder="Select">
                <el-option
                    v-for="item in options"
                    :key="item"
                    :label="item"
                    :value="item"
                />
              </el-select>

data() {
        return {
          findObj:{},
          cutObj:{},
          //value值和选项名
          options:['不限','未发货','发货中','已完结']
        }
      }

methods:{
        cutByItem(pageNO){
          this.findObj.pageNO=pageNO;
          //把带有status选项值的findObj对象 发送给后台
          axios.get("/project/order/cutByItem",{params:this.findObj}).then(resp=> {
            this.cutObj = resp.data;
          });
        }
    }

## 日期组件 ##

<el-date-picker
            v-model="birthday"
            type="date"
            placeholder="请选择生日"
            :size="size"
            value-format="YYYY-MM-DD"
        />

## 表格 ##

<el-table :data="userList" style="width: 100%" border="1">
          <el-table-column prop="id" label="编号"  />
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="birthday" label="生日" />
          <el-table-column prop="phone" label="电话" />
          <el-table-column fixed="right" label="操作" width="">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="del(scope.row)">
                  删除</el-button>
              <el-button link type="primary" size="small">修改</el-button>
            </template>
          </el-table-column>
    </el-table>

**prop** 表示当前列对应的属性名

**lable** 表示表头的文本内容

**scope.row** 代表当前行对象

## 分页 ##

<el-pagination
            v-model:current-page="pageNO"
            v-model:page-size="pageSize"
            background
            layout="prev, pager, next, jumper"
            :total="count"
            @current-change="findByItem"
    />

**current-page**="pageNO" 当前页码  
**page-size**="pageSize" 每页显示记录数  
**:total**="count" 总记录数  
**@current-change**="findByItem" 点击页码，触发的事件  
  
它的页码是自动注入的，findByItem方法不需要传参可以直接获取到页码

## 对话框 ##

<el-button type="primary" @click="showAdd=true">添加</el-button>
        <el-dialog
            v-model="showAdd"
            title="标题"
            width="50%"
        >
          <span>对话框 正文</span>
          <template #footer>
          <span class="dialog-footer">
            <el-button type="success" @click="showAdd = false">确定</el-button>
            <el-button type="primary" @click="showAdd = false">取消</el-button>
          </span>
          </template>
    </el-dialog>

showAdd控制显示隐藏

## 表单验证 ##

<el-form
            ref="ruleFormRef"
            :model="studentObj"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
        >
          <el-form-item label="姓名" prop="name">
            <el-input v-model="studentObj.name" />
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input v-model="studentObj.phone" />
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="studentObj.email" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">Create</el-button>
            <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
          </el-form-item>
    </el-form>

ref="ruleFormRef" **表单唯一标识id**  
:model="studentObj" **模型对象**  
:rules="rules"  **验证规则**

## **Menu菜单** ##

<el-row>
    //这个组件会渲染在一个包含了4个栅格的列中
          <el-col :span="4">
            <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
            >
              <el-sub-menu index="1">
                <template #title>
                  <el-icon><location /></el-icon>
                  <span> 班级管理</span>
                </template>
                <el-menu-item-group title="Group One">
                  <el-menu-item index="1-1">新班管理</el-menu-item>
                  <el-menu-item index="1-2">班级信息</el-menu-item>
                  <el-menu-item index="1-3">班级物资</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
              <el-sub-menu index="2">
                <template #title>
                  <el-icon><location /></el-icon>
                  <span> 学生管理</span>
                </template>
                <el-menu-item-group title="Group One">
                  <el-menu-item index="2-1">新班管理</el-menu-item>
                  <el-menu-item index="2-2">学生信息</el-menu-item>
                  <el-menu-item index="2-3">学生统计</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
              <el-sub-menu index="3">
                <template #title>
                  <el-icon><location /></el-icon>
                  <span>element-Ui</span>
                </template>
                <el-menu-item-group >
                  <el-menu-item index="3-1" @click="$router.push('/ui/base')">基础组件</el-menu-item>
                  <el-menu-item index="3-2" @click="$router.push('/ui/form')">表格</el-menu-item>
                  <el-menu-item index="3-3">表单</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
            </el-menu>
          </el-col>
    //用于渲染一个单独的视图组件，渲染在一个包含了20个栅格的列中
          <el-col :span="20">
              <router-view></router-view>
          </el-col>
        </el-row>

## 一键勾选默认值 ##

界面

<el-checkbox-group v-model="selectGradeArray">
          <el-checkbox v-for="g in gradeArray" :label="g.id" >{
       {g.name}}</el-checkbox>
        </el-checkbox-group>
        {
       {selectGradeArray}}
        <el-button type="primary" @click="init">初始化</el-button>

数据

selectGradeArray:[],
         array1:[{id:1,name:"添加用户"},{id:4,name:"查询用户"},{id:5,name:"报表查询"}],

函数

init(){
          //this.selectGradeArray=this.gradeArray.map(n=>n.id)  全选
          this.selectGradeArray=this.array1.map(n=>n.id);
        },

利用Array.map()方法，将默认的权限数组中所有元素的id属性提取出来，将它们存储在selectGradeArray中。

[icon-default.png_t_N3I4]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/6a8c90fca7a945a3acabc281c7672c58.png
[Vue 3 UI _ _ Element Plus _gitee.io_icon-default.png_t_N3I4_https_element-plus.gitee.io_zh-CN]: https://element-plus.gitee.io/zh-CN/