introduction
Vue is one of the most popular front-end frameworks. As a front-end developer, you should master it proficiently. If you plan to learn the development process of Vue, then come on, Brother Ming will take you to get started quickly and take you to fly!
Even if you are not a front-end developer, it is necessary to have a certain understanding of the front-end development process. No one is sure whether the company will let me do the front-end in the future. It does not take a lot of time to do some simple examples. It can improve your self-confidence and sense of accomplishment, so follow Brother Ming, there is nothing wrong, come on!
navigation
✪ General index of Vue development example directory ◄Previous article [16] Create tab page ►Next article [18] Addition, deletion and modification of user list
Create user pages and routes
- Create user page
Create a folder user under src, create a file UserList.vue, and the contents of the file are as follows:
<template>
<div>用户列表</div>
</template>
<script>
export default {
name: "UserList"
}
</script>
<style scoped>
</style>
- In the mockjs used before, modify the menu data and add user-managed data
Mock.mock('/post/menuList','get',function(){
const menu_data = [
{
name:'用户管理',
icon:'el-icon-user',
path:'/index/userList',
component:'user/UserList'
},
{
name:'一级菜单1',
icon:'el-icon-location',
path:'/index/menu1',
component:'Main1'
},
{
name:'一级菜单2',
icon:'el-icon-document',
path:'/index/menu2',
component:'Main2'
}
]
return{
menu_data
}
});
- page effect
Implementation list
- page template
<template>
<el-table
:data="userData"
style="width: 100%"
border
:default-sort = "{prop: 'date', order: 'descending'}"
>
<el-table-column
prop="date"
label="日期"
sortable
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
sortable
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
- data
userData:
[
{
date: '2022-05-02',
name: '明世隐3号',
address: '江西省南昌市XXXXXX路1号'
}, {
date: '2022-05-04',
name: '明世隐4号',
address: '江西省南昌市XXXXXX路2号'
}, {
date: '2022-05-01',
name: '明世隐1号',
address: '江西省南昌市XXXXXX路4号'
}, {
date: '2022-05-03',
name: '明世隐2号',
address: '江西省南昌市XXXXXX路3号'
}
]
- page effect
- Simulate fetching data from the backend
Simulate data in mockjs, put userData data in mock, add the following code
Mock.mock('/post/userList','get',function(){
const userData = [
{
date: '2022-05-02',
name: '明世隐3号',
address: '江西省南昌市XXXXXX路1号'
}, {
date: '2022-05-04',
name: '明世隐4号',
address: '江西省南昌市XXXXXX路2号'
}, {
date: '2022-05-01',
name: '明世隐1号',
address: '江西省南昌市XXXXXX路4号'
}, {
date: '2022-05-03',
name: '明世隐2号',
address: '江西省南昌市XXXXXX路3号'
}
]
return{
userData
}
});
the request code for the data in the page,
- Define the method getUserData, use axios to request data, and set the requested data to userData.
- Call the getUserData method in the created dog hook function.
data() {
return {
userData:[]
}
},
methods:{
getUserData(){
this.$axios.post('/post/userList').then(res=>{
this.userData = res.data.userData;
});
}
},
created() {
this.getUserData();
}
form optimization
- header customization
- el-table adds the property header-row-class-name value to table_header_class
- Set the style, pay attention to use: /deep/.table_header_class th
- table scrolling
If there is too much data, you need to add table scrolling, otherwise the external scrolling is ugly, see the effect below
It is relatively simple to deal with, just add the height attribute to the el-table, for example, I set the value to 360
The effect after setting:
- join data index
Just add a column to the table, set type="index"
<el-table-column
type="index"
width="50">
</el-table-column>
- Use slots to customize the display
Make the data look more conspicuous and classify more clearly.
For example, userData is tagged to indicate whether the address is work or home
[
{
date: '2022-05-02',
name: '明世隐3号',
address: '江西省南昌市XXXXXX路1号',
tag:'家'
}, {
date: '2022-05-04',
name: '明世隐4号',
address: '江西省南昌市XXXXXX路2号',
tag:'工作'
}, {
date: '2022-05-01',
name: '明世隐1号',
address: '江西省南昌市XXXXXX路4号',
tag:'工作'
}, {
date: '2022-05-03',
name: '明世隐2号',
address: '江西省南昌市XXXXXX路3号',
tag:'家'
},
]
Add a column to display the tag label
<el-table-column
prop="tag"
label="标签">
</el-table-column>`
page effect
It doesn't look special, it feels very plain.
Add a slot to modify it, it will be more beautiful and conspicuous
<el-table-column
prop="tag"
label="标签">
<template slot-scope="scope">
<el-tag
:type="scope.row.tag === '家' ? 'primary' : 'success'"
disable-transitions>{
{
scope.row.tag}}</el-tag>
</template>
</el-table-column>
Page effect:
Search function
Here is a simple search by name
- Add a search box and a search button to the page, and add code in front of the table
<div id="button_div">
<el-input id='search-input' size='small' label-width='100px'
prefix-icon="el-icon-search" placeholder="请输入名字..."
v-model='search_name'>
</el-input>
<el-button type="primary" size='small' class="search-button" @click="search">搜索</el-button>
</div>
-
Define search_name in data, corresponding to v-model of el-input
-
Write the search method search to simulate the query
search(){
this.$axios.post('/post/searchUser',{
name:this.search_name}).then(res=>{
this.userData = res.data.userData;
});
}
- Write code in mockjs
Mock.mock('/post/searchUser','post',function(param){
console.log(param)
let body = JSON.parse(param.body);
let name = body.name;
let newData=[]
if(name){
newData = userData.filter((item)=>{
return item.name.indexOf(name)>-1;
})
}else{
newData = userData;
}
return{
userData:newData
}
});
- The test is as follows:
summary
This section summarizes "Implementing the user list", I hope it can be helpful to everyone, please help [Like] + [Favorite] + [Punch in the comment area] If you are interested in learning Java and front-end with Xiao Ming , [Follow a wave] Don't get lost.
Please go to the bottom of the article to help [One-click three links] Thank you!
navigation
✪ General index of Vue development example directory ◄Previous article [16] Create tab page ►Next article [18] Addition, deletion and modification of user list
Popular column recommendation
【1】Java mini-games (Tetris, Plants vs. Zombies, etc.) 【
2】JavaWeb project combat (library management, dormitory management, etc.)
【3】JavaScript wonderful examples (aircraft wars, verification codes, etc.)
200 cases
[5] Learn Java from zero, learn Java with fun
[6] IDEA from zero to proficient
