文章介绍了Element-UI，一个由饿了么前端团队开发的基于Vue.js的组件库，包括如何注册和使用，如布局、按钮、单选框、复选框、日期组件、表格、分页和对话框等，并提供了具体的代码示例，展示了在实际开发中的应用。
目录
Element-UI是由饿了么前端团队开发的一套基于Vue.js的桌面端组件库，包含了多个常用的UI组件，如按钮、输入框、表格、弹窗等，可以快速地搭建一个现代化的Web应用程序。一个 Vue 3 UI 框架 | Element Plus (gitee.io)
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 分栏，迅速简便地创建布局。
<div>
<el-row>
<el-col :span="8" style="background-color: red">网格1</el-col>
<el-col :span="10" style="background-color: green">网格2</el-col>
<el-col :span="6" style="background-color: dodgerblue">网格3</el-col>
</el-row>
</div>网格分栏中可以继续嵌套
<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中。
1147
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
