Author Gitee address https://gitee.com/thciweicloud
Author project Bread blog , a front-end and back-end separation blog system of microservice architecture.
element-ui
Is element UI a UI component library developed by the team
Tips
When we use some components, we often need v-model binding values to select or display them. When we encounter Boolean types, we need to use ':' for attribute binding
1. Button assembly
1.1. Button entry
#1.1. Default button style <el-row> <el-button>Default button</el-button> <el-button type="empty/primary/success/info/warning/danger">main-success/information/warning/DANGER/Button</el-button> </el-row> #1.2. Simple buttons will be displayed only when the mouse is placed <el-row> <el-button type="empty/primary" plain>simple-success/information/warning/Danger button</el-button> </el-row> #1.3. Fillet button <el-row> <el-button type="empty/primary" round>fillet-success/information/warning/DANGER/Button</el-button> </el-row> #1.4. Icon button <el-row> <el-button type="empty/primary" icon="el-icon-search" circle></el-button>
1.2. Detailed use of buttons
Summary: when using related components of element UI in the future, it should be noted that all components begin with e1- component names
2.1 create button (attribute / button group)
When reading the document, you can look at Attributes to get familiar with the Attributes of button. The default value is true when building or writing Attributes (plain < plain = "true" >)
#1 <el-button type="success" round circle icon="el-icon-loading"></el-button> //Generally, the circle does not put text, pictures or effects
#2<el-button-group></el-button-group>
2.Link text link component
2.1. Creation of text link component
It defaults to true when creating. When de underlining is set, the underline needs to be written as
<el-link target=" _blank" href="http://www.baidu.com"type="success" :underline="false"></el-link>
Because underline wants us to pass a boolean value. If you do not add: (binding), it will be considered that we passed a string from js, resulting in the function not taking effect.
Target = "_blank" open link in new window
3. Use of layout components
Through the basic 24 columns, the layout can be created quickly and easily. In the element ui, the layout component divides the page into multiple rows, and each row can be divided into 24 columns (columns) at most
Row: row Columns: column
The number of Layout columns is twice that of bootstrap. Why 24?
Whether it is 24 or 12, it is for the convenience of future mathematical calculation, and the common multiple of 3 / 4 / 6 is selected
3.1 use of rows
<el-row :gutter="50" tag="span"> <el-col :span="6"><div style="border: 1px solid red">Occupancy 6</div></el-col> <el-col :span="4"><div style="border: 1px solid red">Occupancy 2</div></el-col> <el-col :span="4"><div style="border: 1px solid red">Occupancy 4</div></el-col> <el-col :span="10"><div style="border: 1px solid red">Occupancy 4</div></el-col> </el-row>
Tag = "span" tag can render lines into some notes
3.2 use of columns
<el-row> <el-col :span="12" :offset="6"><div style="border: 1px solid red">Occupation 12</div></el-col> </el-row>
Column offset
: offset = "" offset several copies (left space)
: push = "" move right ""
offset is equivalent to a margin, and push is equivalent to right floating
4.Container container layout components
4.1 creating containers
<el-container> </el-container>
4.2 container child elements
<el-header>: Top bar container. <el-aside>: Sidebar container. <el-main>: Main area containers. <el-footer>: Bottom bar container.
4.3 nesting of containers
vertical horizontal
vertical when there is an EL header or El footer in the child element, otherwise horizontal
<el-container direction="vertical"></el-container>
5. Use of radio button components
5.1 creation of radio buttons
<el-radio v-model="label" label="male">male</el-radio> <el-radio v-model="label" label="female">female</el-radio> <script> export default { data() { return { label: "male", }; }, }; </script>
radio adds at least two attributes: v-model and label
v-model binds data, and label determines the value value. In the above case, the radio button defaults to male
5.2 use of radio events
-
Listening events provided by element UI for radio
-
When using events, you must use vue to bind time, such as @ click
<el-radio v-model="label" @change="aa" :border="true" size="mini" label="male" >male</el-radio> export default { data() { return { label: "male", }; }, methods: { aa() {//Event handler // alert("Mr. Ma"); console.log(this.label); }, }, };
When the button is selected, get the label value "male"
5.3 button group
<el-radio-group v-model="radio"> <el-radio label="3">Alternative 3</el-radio> <el-radio label="6">Option 6</el-radio> <el-radio label="9">Option 9</el-radio> </el-radio-group> export default { data() { return { radio: "3", }; }, methods: { }, }; </script>
Note that text color / fill is an attribute of El radio button
6.checkbox component
6.1 creating components
<el-checkbox v-model="checked" true-label="Beijing">Beijing</el-checkbox> <el-checkbox v-model="checked" true-label="Shanghai">Shanghai</el-checkbox> <el-checkbox v-model="checked" true-label="Tianjin">Tianjin</el-checkbox>
6.2 attribute usage
The properties are roughly the same as the previous components,
When checking checked, match the checked value through true label
export default { data() { return { checked: "Shanghai", }; }, };
6.3 event use
@change=""
6.4 the check box group also exists
min is the minimum number that can be checked
<el-checkbox-group v-model="checkList" :min="1"> </el-checkbox-group>
7.input component
7.1 creating
input is the bound value of the controlled component
<el-input ></el-input> <el-input v-model="name"></el-input> export default { data() { return { name: "", }; }, };
7.2 properties
type="textarea"//Build text field v-model="name" v-model="name1"
v-model binds different instances to ensure that the input box does not update data synchronously
Display input word count
show-word-limit Only in type="text"and type="textarea"Time effective Word count needs to limit the number of words to display :maxlength="" :minlength=""
7.3 events
@Clear clear clear
@change
7.4 component method
The method is the last big knowledge point of element UI. The method is used to change the state of the component itself
Name by ref (component alias). This. $Ref. component alias. Element UI has its own method in the method
<el-input v-model="name3"ref="inputs"></el-input> <el-button @click="focusInputs">focus method</el-button> <el-button @click="blurInputs">blur method</el-button> export default { data() { return { name3: "", }; }, methods: { //Call the focus method focusInputs() { this.$refs.inputs.focus(); }, //Call the out of focus method blurInputs() { this.$refs.inputs.blur(); }, }, };
Note: all components in elements have attribute events and methods
Attribute: written directly on the corresponding component label. Usage: attribute name = attribute value
Event: directly use vue to bind the event Party and write it on the corresponding component label. Usage: @ event name = event handling function in vue
Methods: 1. Use ref = component alias on the corresponding component label
2. Call by using this. $refs. Component alias. Method name ()
8.Select components
8.1 write dead on the page
<el-select> <el-option>Beijing</el-option> <el-option>Shanghai</el-option> </el-select>
There should also be v-model data binding in the case of write dead
8.2 loading lists using remote data
<template> <div> <el-select> <el-option v-for="option in options" :label="option.name" :value="option.id" :key="option.id" > </el-option> </el-select> </div> </template> <script> export default { data() { return { options: [ { id: "1", name: "Canteen" }, { id: "2", name: "Millet Department" }, { id: "3", name: "Xiaohua Department" }, ], }; }, };
8.3 obtain the selected data in the following list
There is also the use of attributes (multiple clear = "")
<template> <div> <el-select v-model="cityId" multiple clearable=""> <el-option v-for="option in options" :label="option.name" :value="option.id" :key="option.id" > </el-option> </el-select> </div> </template> <script> export default { data() { return { options: [ { id: "1", name: "Canteen" }, { id: "2", name: "Small mi Department" }, { id: "3", name: "Small hua Department" }, ], cityId: "", }; }, };
8.4 event use
<el-select v-model="cityId" multiple clearable="" @change="aaa"> </el-select> methods: { aaa(value) { console.log(value); }, },
8.5 use of methods
ref="alias" bbb(){ this.$ref.alias.method(); }
9.Switch components
9.1 creating components
<el-switch v-model="value"> </el-switch> export default { data() { return { value: "", }; }, };
width to add:
9.2 use of attributes
<el-switch v-model="value" :width="200" active-text="open" inactive-text="close" active-value="true" inactive-value="false" ></el-switch> <!-- Need to bind a bool value --> <script> export default { data() { return { value: "", }; }, };
9.3 use of events
@change indicates status
9.4 use of methods
aaa() { this.$refs.switchs.focus(); },
The way components call methods is basically the same
10.DataPicker component
10.1 creating components
<el-date-picker v-model="value"> </el-date-picker>
10.2 unique attributes
Pick options attribute to bind ':'
- picker Options is used to customize the date control
- shortcuts is a shortcut panel used to add date components
10.2.1 use of shortcuts
<el-date-picker v-model="value2" :editable="false" type="date" placeholder="Please enter the time" :picker-options="pickerOptions" ></el-date-picker> <script> export default { data() { return { pickerOptions: { shortcuts: [ { //Defined shortcuts text: "Last week", onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); picker.$emit("pick", [start, end]); }, }, { text: "Last month", onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); picker.$emit("pick", [start, end]); }, }, { text: "Last three months", onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); picker.$emit("pick", [start, end]); }, }, ], }, value2: "", }; }, }; </script>
10.2.2 use of picker options
When we want users to select dates only forward or backward, we need to customize the configuration
Time before today is not available
<el-date-picker v-model="createDate" :editable="false" type="date" placeholder="Please enter the time" :picker-options="pickerOptions" ></el-date-picker> <script> export default { data() { return { createDate: "", pickerOptions: { disabledDate(time) { return time.getTime() < Date.now(); }, }, value2: "", value1: "", value: "", }; }, }; </script>
Methods are rarely used and are the same as the previous components
10.3 use of events
<el-date-picker @change="aaa"></el-date-picker> methods: { aaa(value) { console.log(value); //Select time and return time in the background }, },
11.Upload component
Note: when using the upload component, there is no event event, and all events are attribute events
11.1 components created
When creating, action is a necessary attribute
<el-upload action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList" > <el-button size="small" type="primary">Click upload</el-button> <div slot="tip" class="el-upload__tip"> Upload only jpg/png Documents, and no more than 500 kb </div>//Be sure to put it inside </el-upload>
11.2 use of attributes
multiple, pay attention to the boolean type, and be sure to: use binding
<template> <div> <h1>upload</h1> <el-upload action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList" :data="info" :on-remove="remove" :before-remove="beforemove" :limit="2" :on-exceed="exceed" > <el-button size="small" type="primary">Click upload</el-button> <div slot="tip" class="el-upload__tip"> Upload only jpg/png Documents, and no more than 500 kb </div> <!-- div Text on upload in --> </el-upload> </div> </template> <script> export default { data() { return { fileList: [ { name: "food.jpeg", url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100", }, { name: "food2.jpeg", url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100", }, ], info: { id: 21 }, }; }, methods: { remove(file, fileList) { console.log(file); console.log(fileList); alert(fileList.length); }, beforemove(file, fileList) { if (fileList.length < 3) alert("The number of files cannot be less than three"); return false; }, exceed(file, fileList) { alert("File out of limit"); }, }, }; </script>
slot we use to place instructions and tips
11.3 use of methods
Still the traditional way, ref = "alias"
< El button @ Click = "method" > trigger
Method ()
12.Form component
Simple, because we just fill in the previous components; Complex because we have to complete a variety of form validation
12.1 creation of components
<el-form ref="form" :model="form" label-width="80px"> <el-form-item label="Activity name"> <el-input v-model="form.name"></el-input> </el-form-item> ...... <el-button type="primary" @click="onSubmit">Create now</el-button> <el-button>cancel</el-button> </el-form-item> </el-form>
12.2 inline form
<el-form :inline="true" :model="formInline" class="demo-form-inline"> </el-form>
Use inline = "true" to change the form field into an in line form field
12.3 form validation
What is form validation? One of the biggest problems solved by the birth of javascript is form verification. We verify whether the format of the input content is consistent, the number of words is insufficient or exceeds, and the response information is quickly returned to the user. There is no need to return the data to the background server, which will not increase the load of the server
The Form component provides the function of Form verification. You only need to pass in the agreed verification rules through the rules attribute and set the prop attribute of the Form item to the field name to be verified. For verification rules, see async-validator
<el-form> <el-form-item label="Activity name" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> ...... </el-form> export default { data() { return { ruleForm: { name: "", region: "", date1: "", date2: "", delivery: false, type: [], resource: "", desc: "", }, rules: { name: [ { required: true, message: "Please enter the activity name", trigger: "blur" }, { min: 3, max: 5, message: "The length is between 3 and 5 characters", trigger: "blur" }, ], }, }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert("submit!"); } else { console.log("error submit!!"); return false; } }); }, }, };
13. Message prompt
13.1 alert component
13.1.1 create
<el-alert title="success" type="success"> </el-alert>
13.1.2 use of attributes
//For the use of slots, many components learned earlier can also use slots <el-alert> <div slot>I'm auxiliary information</div> </el-alert>
//Whether to display icon and customize closing text <el-alert title="Success information prompt" :show-icon="false" close-text="close" ></el-alert>
13.2 Message component
There is no way to create El message, but element UI is encapsulated in js
- Note that there is no need to write any label in the page to create this component. It is a js plug-in. You can directly call the provided js plug-in method where you need to display the message prompt
<el-button type="primary" @click="open">Open message prompt </el-button> export default { data() { return {}; }, methods: { open() { this.$message("This is a reminder"); }, }, };
Custom message tips
openVn() { const h = this.$createElement; this.$message({ message: h("p", null, [ h("span", null, "Order created successfully,Your order number is"), h("a", { style: "color:teal" }, "87"), //html notes can be used, such as i, a, i notes can play a tilt effect ]), }); },
Message tips for different topics
success warning error
<el-button :plain="true" @click="open3">warning</el-button> open3() { this.$message({ message: "This is a warning", type: "warning", }); },
13.2.1 use of attributes
<el-button :plain="true" @click="open3">warning</el-button> <el-button :plain="true" @click="closeOpen3">Turn off warning</el-button>
duration:0 causes the warning not to close automatically
Create a method to close manually
open3() { this.$message({ message: "This is a warning", type: "warning", showClose: true, center: true, duration: 0, }); }, closeOpen3() { this.$message.closeAll(); },
14.table component
14.1 creation
<template> <div> <el-table :data="tableData"> <el-table-column prop="id" label="Student number"> </el-table-column> <el-table-column prop="name" label="full name"> </el-table-column> <el-table-column prop="age" label="Age"> </el-table-column> <el-table-column prop="email" label="mailbox"> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { id: 21, name: "Xiao Chen", age: 23, email: "1462106425@qq.com" }, { id: 22, name: "Xiao Chen", age: 23, email: "1462106425@qq.com" }, ], }; }, // created(){ // this.axios.get("") // }The normal form data entry method can update the data in real time. We temporarily use the above false data instead }; </script>
14.2 use of attributes
empty-text=" "
The content will be displayed when the whole form has no data
<el-table :data="tableData" :row-class-name="showCss" :height="600" :fit="true" empty-text="No data" border > <el-table-column type="selection"> </el-table-column> //checkbox </el-table> methods: { sorts(a, b) { return a.age - b.age; //Sort > 0 ascending }, showDept(row, column, cellValue, index) { if (cellValue) { return cellValue; } else { return "No department"; } }, showCss({ row, rowIndex }) { if (rowIndex % 2 == 0) return "warning-row"; else return "success-row"; }, },
14.3 use of events
<el-table @Event name="Method name"> </el-table>
14.4 use of methods
Clear the selection. The ref name must be in the El table, not in the selection column
<el-table :data="tableData" :row-class-name="showCss" :height="600" :fit="true" empty-text="No data" @select="aaa" ref="mytable" border > <el-table-column type="selection"> </el-table-column> </el-table> <el-button @click="clearSelect">Uncheck</el-button> clearSelect() { this.$refs.mytable.clearSelection(); },
14.5 define the operation column in the table
<el-table-column> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" >Edit</el-button > <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" >Delete</el-button > </template> </el-table-column> handleEdit(index, row) { console.log(index); console.log(row); }, handleDelte(index, row) { console.log(index); console.log(row); },
14.6 definition header
<el-table :data=" tableData.filter( (data) =>!search || data.name.toLowerCase().includes(search.toLowerCase()) ) " :row-class-name="showCss" :height="400" :fit="true" empty-text="No data" @select="aaa" ref="mytable" border > ...... <el-table-column align="right"> <template slot="header" slot-scope="scope"> <el-input v-model="search" size="mini" placeholder="Enter keyword search" /> </template> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button> </template> </el-table-column> </el-table> handleEdit(index, row) { console.log(index); console.log(row); }, handleDelte(index, row) { console.log(index); console.log(row); },
element small project case
(1) NavMenu navigation menu

App.vue <template> <div id="app"> <el-container> <el-header> <!-- navigation bar --> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" > <el-menu-item index="/index">homepage</el-menu-item> <el-menu-item index="/users">user management </el-menu-item> <el-menu-item index="/msgs">Message center</el-menu-item> <el-menu-item index="/order"> Order management</el-menu-item> </el-menu> </el-header> <el-main>Main</el-main> </el-container> <router-view></router-view> </div> </template> <script> export default { name: "index", data() { return { activeIndex: "1", }; }, methods: { handleSelect(key, keyPath) { console.log(key, keyPath); //Switch route this.$router.push(key); }, }, }; </script> <style > </style>
List.vue <template> <div> <h1>show user</h1> </div> </template> <script> export default { name: "List", }; </script> <style> </style>
report errors:
Uncaught(in promise)NavigationDuplicated: Avoided redundant navigation to current location: "/index".
The solution is added under Vuerouter introduced in main.js
const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) }
(2) Home page rotation chart and user management form
Carousel map - walking lantern
View the lantern, Image and Image documents
Here are some problems:
fill and other styles / binding of pictures
It is generally appropriate to change height to 600px
V-for = "picture data in item in data"
<template> <div> <el-carousel indicator-position="outside"> <el-carousel-item v-for="item in imgs" :key="item"> <el-image style="height: 600px" :src="item" fit="fill"></el-image> <!-- Because the picture style is written dead, there is no need to bind fit(:fit) --> </el-carousel-item> </el-carousel> </div> </template> <script> import homePng1 from "../assets/homepng/1.jpg"; import homePng2 from "../assets/homepng/2.jpg"; import homePng3 from "../assets/homepng/3.jpg"; import homePng4 from "../assets/homepng/4.jpg"; export default { name: "Index", data() { return { imgs: [homePng1, homePng2, homePng3, homePng4], }; }, }; </script>
form
Find the Table document and select the custom column template section
subject
List.vue <template> <div> <el-table :data="tableData.filter( (data) => !search || data.name.toLowerCase().includes(search.toLowerCase()) ) " style="width: 100%" > <el-table-column label="date" width="180"> <template slot-scope="scope"> <i class="el-icon-time"></i> <span style="margin-left: 10px">{{ scope.row.date }}</span> </template> </el-table-column> <el-table-column label="number" prop="id"> </el-table-column> <el-table-column label="full name" width="180"> <template slot-scope="scope"> <el-popover trigger="hover" placement="top"> <p>full name: {{ scope.row.name }}</p> <p>address: {{ scope.row.address }}</p> <div slot="reference" class="name-wrapper"> <el-tag size="medium">{{ scope.row.name }}</el-tag> </div> </el-popover> </template> </el-table-column> <el-table-column label="Gender" prop="sex"> </el-table-column> <el-table-column label="operation"> <template slot="header" slot-scope="scope"> <el-input v-model="search" placeholder="Please enter a name keyword to search"></el-input> </template> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" >edit</el-button > <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" >delete</el-button > </template> </el-table-column> </el-table> <br /> <el-button type="success">add to</el-button> </div> </template> <script> export default { name: "List", data() { return { search: "", tableData: [ { id: 1, date: "2016-05-02", name: "Wang Xiaohu", address: "Lane 1518, Jinshajiang Road, Putuo District, Shanghai", sex: "male", }, { id: 2, date: "2017-01-02", name: "Power pig", address: "Jinshajiang Road, Beijing ", sex: "male", }, ], }; }, methods: { handleEdit(index, row) { console.log(index, row); }, handleDelete(index, row) { console.log(index, row); }, }, }; </script>
search
The search box is in the same column as the operation section
<template slot="header" slot-scope="scope"> <el-input v-model="search" placeholder="Please enter a name keyword to search"></el-input> </template>
By setting Scoped slot Custom header.
We need a slot solt. For the solt attribute, we temporarily use the form of slot="header/footer", but it has been changed to v-solt:header in the new version of vue
<template v-slot:header> </template>
filter
Find the custom header section and view the filtering example
At the beginning, the search cannot be used because the entire table is not filtered. Here we will filter the name as an example
el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
add to
<el-button style="margin-top: 10px" type="success">add to</el-button>
<el-container> <el-aside width="300px" > <el-col :span="12"> <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router="true"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span>home page</span> </template> </el-submenu> <el-menu-item index="/echarts2"> <i class="el-icon-menu"></i> <span slot="title">image</span> </el-menu-item> <el-menu-item index="/personMan" > <i class="el-icon-document"></i> <span slot="title">Personnel management</span> </el-menu-item> <el-menu-item index="/actRecord"> <i class="el-icon-setting"></i> <span slot="title">Activity record</span> </el-menu-item> </el-menu> </el-col> </el-row> </el-aside> </el-container>