Basic usage of Element Plus
element-ui 是基于vue 开发的一套ui组件库，提供丰富的网页开发组件，可用快速开发网站，降低前端开发成本
Version element currently has two versions
element-ui：基于vue2
element-plus: 基于vue3
Official website address
https://element-plus.org/zh-CN/component/button.html
element-plus basic usage
1.安装
npm install element-plus
2. 在vue项目main.js引入element-plus组件，以及css文件
3. 在官方文档中找到需要的样式组件复制代码对应的.vue中使用。
The process of developing a website with elementUI
1.页面布局
2.导航栏
3.每个页面功能开发
1.pycharm creates a vue project
2.Initialization,
npm install vue-router@4 #导入路由
vue add router #安装路由
npm install element-plus #安装插件
3. Placement note
4. Cloth station
Configure navigation bar
<el-container>
<el-aside width="200px">
<el-menu
default-active="2"
class="el-menu-vertical"
@open="handleOpen"
@close="handleClose"
>
<el-menu-item index="1">
<el-icon><icon-menu /></el-icon>
<span>仪表盘</span>
</el-menu-item>
<el-sub-menu index="2">
<template #title>
<el-icon><location /></el-icon>
<span>一级菜单1</span>
</template>
<el-menu-item index="2-1">二级菜单1</el-menu-item>
<el-menu-item index="2-2">二级菜单2</el-menu-item>
<el-menu-item index="2-3">二级菜单3</el-menu-item>
</el-sub-menu>
<el-sub-menu index="3">
<template #title>
<el-icon><location /></el-icon>
<span>二级菜单2</span>
</template>
<el-menu-item index="3-1">二级菜单1</el-menu-item>
<el-menu-item index="3-2">二级菜单2</el-menu-item>
</el-sub-menu>
The configuration is completed as shown in the figure.
Configure to fill the entire content area
Configure navigation bar color
Dynamically generated based on router
Enable vue-router mode. When activating navigation, use index as path to perform routing jump
1. Configure dynamic routing (index.js)
The complete routing configuration is as follows
const routes = [
{
path: '/',
name: '仪表板',
component: Layout
},
{
path: '/nav1',
name: '一级菜单1',
component: Layout,
children: [
{
path: '/a',
name: '页面A',
component: () => import(/* webpackChunkName: "about" */ '../views/A.vue')
},
{
path: '/b',
name: '页面B',
component: () => import(/* webpackChunkName: "about" */ '../views/B.vue')
},
]
},
{
path: '/nav2',
name: '一级菜单2',
component: Layout,
children: [
{
path: '/c',
name: '页面C',
component: () => import(/* webpackChunkName: "about" */ '../views/C.vue')
}
]
}
]
- Configure the logic of page processing navigation bar
<el-menu
default-active="2"
class="el-menu-vertical"
background-color="#304156"
text-color="#FFFFFF"
active-text-color="#ffd04b"
@open="handleOpen"
@close="handleClose"
router
>
<template v-for="menu in this.$router.options.routes" :key="menu">
<!--处理没有子路由的菜单-->
<el-menu-item v-if="!menu.children" :index="menu.path">
<span>{
{menu.name}}</span>
</el-menu-item>
<!--处理子路由的菜单-->
<el-sub-menu v-else-if="menu.children" :index="menu.path">
<template #title>
<el-icon><location /></el-icon>
<span>{
{menu.name}}</span>
</template>
<!--循环二级菜单 -->
<el-menu-item v-for="child in menu.children" :key="child" :index="child.path">{
{child.name}}</el-menu-item>
</el-sub-menu>
</template>
</el-menu>
Configure page icon
#安装图标
npm install @element-plus/icons-vue
Import and register icon
Official icon address
https://element-plus.org/zh-CN/component/icon.html#%E5%9B%BE%E6%A0%87%E9%9B%86%E5%90%88
Dynamically configure navigation bar icons
- Modify routing
In the routing icon: ‘HelpFilled’, configure the routing keyword - Reference routing configuration
<el-icon><component :is="menu.icon"/></el-icon>
Verification
Implement the navigation bar folding function
1. Configure the folding icon
2. Configure the folding logic a>
Implement the function of clicking the icon to display a small hand
Configure the navigation bar log icon
Configure the logo style
Finally The effect is as shown in the figure
Configure avatar and drop-down box
Configure drop-down box
<el-dropdown>
<span class="el-dropdown-link">
<img src="../assets/touxiang.png" alt="">
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>密码修改</el-dropdown-item>
<el-dropdown-item>退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
Configure avatar
Set avatar style
Set layout
Grid layout: Create a layout quickly and easily through the basic 24 columns.
el-row 代表行，里面嵌套el-col
el-col 代表列，总分为24列
Attributes
gutter列间隔
span占据的列数
<el-row :gutter="10">
<el-col :span="12">
<div style="background: green">第一列</div>
</el-col>
<el-col :span="12">
<div style="background: orange">第二列</div>
</el-col>
</el-row>
<br>
<el-row :gutter="10">
<el-col :span="8">
<div style="background: green">第一列</div>
</el-col>
<el-col :span="8">
<div style="background: orange">第二列</div>
</el-col>
<el-col :span="8">
<div style="background: blueviolet">第三列</div>
</el-col>
</el-row>
<br>
<el-row :gutter="10">
<el-col :span="4">
<div style="background: green">第一列</div>
</el-col>
<el-col :span="5">
<div style="background: orange">第二列</div>
</el-col>
<el-col :span="8">
<div style="background: blueviolet">第三列</div>
</el-col>
</el-row>
The display effect is as follows
card
Display data in suspension, similar to a card effect.
Code structure:
form
The form contains input boxes, radio buttons, drop-down selections, multi-select boxes and other components for user input. Use forms to collect, validate and submit data.
Common components of form items:
el-input: 输入框
el-select: 下拉框
el-checkbox-group 多选框
el-radio-group：单选框
Implement input boxes, selection boxes, and submission boxes
<template>
<h1>这是B页面</h1>
<el-form :model="form">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model="form.age"/>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-select v-model="form.sex" placeholder="请选择性别">
<el-option label="男" value="男" />
<el-option label="女" value="女" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onsubmit">提交</el-button>
<el-button>重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
name: "B",
data() {
return {
form: {
name: '',
age: '',
sex: ''
}
}
}
}
</script>
<style scoped>
</style>
Form: Validation Rules
The form component allows you to verify whether the user's input conforms to the specifications to help you find and correct errors
Usage process
1.定义校验规则
2el-form指定“rules” 属性传入定义的校验规则
3.el-form-item指定“prop”属性与校验规则名称对应
Set name, age and gender rules
- Define rules
2. el-form specifies the "rules" attribute and passes in the defined verification rules el-form-item specifies the "prop" attribute
Verification
Customize verification rules to determine whether the two passwords are consistent
form reset button
Reset the entire form, restore it to the initial value state and remove the verification results
1.0 Bind el-form
2.0 Bind Reset button
3.0 Writing reset method
Pre-validation before form submission
Verify the entire form when the submit button is clicked to execute, which can effectively ensure the integrity of the data
Bind submission form
Verification
Return normally when the input is correct
Table: borders, width, fixed columns
Table properties:
border:是否带有纵向边框
data:表格使用的数据，自动渲染
列属性：
prop: 键名，对应数据中的字段
label:列名
width：列宽度
fixed:列是否固定在左侧或者右侧， true 表示固定在左侧
fixed= "right"
1.0 Table configuration
2.0 Writing table data
3.0 Verification
The table component provides support for radio selection. The current-change event manages the events triggered when selected. It will pass in the current data.
1.0 Binding events
2.0 Writing single-selection logic
3.0 Verification
3.0 Writing multiple-selection logic a>
3.1 Binding
3.2 Write logic
3.3 Verification
Delete data
1.0
2.0
sort
Sort tables to quickly find or compare data
Custom template
Customized display content can be used in combination with other components. It is generally used as an operation bar, such as deletion and editing
1.0 Add an edit delete button and bind events, calling the scope function (scope Get the contents of the current line)
2.0 Write deletion and editing logical functions
Pagination
background: 是否为分页按钮添加颜色
page-size 每页的条数
page-sizes 可选每页显示的条数
total 总条目数
layout 分页功能显示内容
current-page: 当前页码改变时触发
size-change 每页显示条目改变触发
current-change 当前页改变时触发
<!-- 分页-->
<el-pagination
v-model:current-page="currentPage4"
v-model:page-size="pageSize4"
:page-sizes="[10, 20, 30, 40]"
:small="small"
:disabled="disabled"
:background="background"
layout="total, sizes, prev, pager, next, jumper"
:total="400"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
feedback component
Implement the operation logic of deleting the pop-up box
1.0 Bind the delete button
2.0 Write the delete function
3.0 Verification
form popup box
Dialog box: informs the user and carries related operations while retaining the current page status, suitable for more customized scenarios
1.0 Write pop-up box logic
<el-dialog v-model="dialogFormVisible" title="创建用户">
<el-form :model="form">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model="form.age"/>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-select v-model="form.sex" placeholder="请选择性别">
<el-option label="男" value="男" />
<el-option label="女" value="女" />
</el-select>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确认</el-button>
</span>
</template>
</el-dialog>
<el-button @click="dialogFormVisible = true" >弹出框</el-button>
2.0 Write pop-up box function
3.0 Verification
