official document
- vue2's element-ui official website: Element - The world's most popular Vue UI framework
- vue3's element-ui official website: a Vue 3 UI framework | Element Plus
1. Install and import
1.1 npm install
npm i element-ui -S
- -S: It is the abbreviation of --save, indicating that this package is a production dependency , and indicating that this package is also used when the project goes online.
- -S: It can be omitted.
- If you want to install development dependencies , add -D.
1.2 import
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
//Completely import ElementUI
//(1) Import package
import ElementUI from 'element-ui'
//(2) Import css Style
import 'element-ui/lib/theme-chalk/index.css'
//(3) Register all components
Vue.use(ElementUI)
new Vue({
render: h => h(App),
}).$mount ('#app')
2. Component usage
2.1 Table component el-table
- Official documentation: Element - The world's most popular Vue UI framework
- Row (data), determines the data of the table. It is an array, and each element in the array is an object representing a row.
- Columns, which determine the table structure. The column is determined by el-table-column, and there are three attributes to master
-
- label: Determine the title displayed in the current column (equivalent to the header)
- prop: Determine the source of the current column data. For a table, its data is an array, each element is an object, and the prop value here is the property name in this object.
prop="date". The prop here is used to extract the attribute value of the attribute named date from each object.
- width: Used to set the width of the column. If not set, it will be adaptive.
Example:
<template>
<div>
// :data 获取的数据 必须是数组
<el-table :data="tableData">
<el-table-column label="姓名" prop="name"></el-table-column>
<el-table-column label="生日" prop="date"></el-table-column>
<el-table-column label="地址" prop="address"></el-table-column>
<el-table-column label="性别">
// 这里用插槽就是自定义列数据 所以column的prop写不写都会被插槽替代
<template v-slot="scope">
<span>{
{ scope.row.gender ? '女' : '男' }}</span>
</template>
</el-table-column>
<el-table-column label="头像">
<template v-slot="scope">
<span>
<img width="80px" :src="scope.row.icon" />
</span>
</template>
</el-table-column>
</el-table>
</div>
</template>
scope: the object of the data collection passed by the child component slot
scope.row is below the scope, and generally represents: the current item data in the data array
scope.$index The subscript of the current data in the :data array
2.2 Form component el-form
Element - The world's most popular Vue UI framework
- 1. The data items in the form are usually wrapped with an object
- 2. The attribute name is generally consistent with the backend interface
- 3. Use v-model two-way binding on the element, otherwise it cannot be input
- 4. Bind events to get form input values through two-way binding
form validation
- Form validation is divided into three steps
- 1. Define validation rules in data()
- 2. Configure corresponding rules on the template (three configurations)
-
- Set the
rulesattribute , the validation rules of each field are arrays, and multiple rules can be written in it - Set properties for forms
modelto pass in form data - Set
propthe attribute , whose value is set as the field name to be verified
- Set the
- 3. Process the final verification result (whether each form passes the verification)
-
- Register the click event for the form button In the event function, find the source component instance through the ref attribute and call the following two methods
- validate( ) encapsulated by elment-ui is used to validate the entire form and return boolean
- resetFields( ) elment-ui package is used to initialize the entire form
<template>
<div>
<el-form
style="width: 360px"
label-position="left"
label-width="80px"
:model="formData" //表单校验所需属性
:rules="formDataRules" //表单校验所需属性
ref="formDataRef" //在form表单提交点击事件中 表单校验所需属性
>
<!-- 1.输入用户名 -->
<el-form-item label="用户名" prop="username"> //表单校验所需属性 prop
<el-input placeholder="请输入用户名" v-model="formData.username"></el-input>
</el-form-item>
<!-- 2.输入密码 -->
<el-form-item label="密码" prop="password">
<el-input placeholder="请输入密码" v-model="formData.password"></el-input>
</el-form-item>
<!-- 3.确认密码 -->
<el-form-item label="确认密码" prop="repassword">
<el-input placeholder="请输入确认密码" v-model="formData.repassword"></el-input>
</el-form-item>
<!-- 4.注册+重置按钮 -->
<el-form-item>
<el-button type="primary" round @click="doRegister">注册</el-button>
<el-button type="warning" round @click="doReset">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'user-page',
data() {
return {
// 表单数据
formData: {
username: '',
password: '',
repassword: ''
},
// 表单校验规则
formDataRules: {
// 每个字段的验证规则是数组,里面可以写多个规则
username: [
{
// 非空验证
required: true,
message: '请输入用户名',
// 触发方式 还有change 一般用blur
trigger: 'blur'
},
{
// 正则
pattern: /^\w{6,15}$/,
message: '请输入不少于6位的用户名',
trigger: 'blur'
}
],
password: [
{
required: true,
message: '请输入密码',
trigger: 'blur'
},
{
pattern: /^\w{6,15}$/,
message: '请输入不少于6位的密码',
trigger: 'blur'
}
],
repassword: [
{
required: true,
message: '请输入确认密码',
trigger: 'blur'
},
{
pattern: /^\w{6,15}$/,
message: '请输入不少于6位的确认密码',
trigger: 'blur'
}
]
}
}
},
methods: {
doRegister() {
// 注册前校验 校验不通过则为false
this.$refs.formDataRef.validate(valid => {
console.log(valid)
if (valid) {
// 如果校验通过执行以下代码
// xxx
}
})
},
doReset() {
// 表单重置 清除表单校验状态,并重置表单到初始状态
// 恢复初始状态不是清空 比如data中的username假如初始值不是空值,就会恢复到这个初始值
this.$refs.formDataRef.resetFields()
}
}
}