The elementui component provides a variety of ui components for vue, but they are all the most basic controls, and do not provide business-level use cases, so they are extended and supplemented.
Vue-elementui basic entry and use
1. Drop-down menu
There is a gap between the drop-down menu and the select control in html. Select is a member of the form control, and the page effect is similar to an input box, while the drop-down menu is a function setting control.
The use of select control can refer to: https://element.faas.ele.me/#/zh-CN/component/select
1.1 Basic usage
The detailed use of the drop-down menu in the elementui component is introduced as follows:
https://element.faas.ele.me/#/zh-CN/component/dropdown
The control name of the drop-down menu is el-dropdown, and all property events about the drop-down list should be set here. Its sub-control span is the content displayed after shrinking, and the el-dropdown-menu sub-control is the content displayed after expansion. As for the specific page effect, it should be set to a specific control.
As can be seen from the following code, setting the trigger=”click” of el-dropdown will activate the drop-down menu after clicking.
<el-row class="block-col-2">
<el-col :span="12">
<span class="demonstration">hover activation</span>
<el-dropdown>
<span class="el-dropdown-link">
Drop-down menu <i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-plus">Golden Cake</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus">Lion head</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus-outline">Snail powder</el-dropdown-item>
<el-dropdown-item icon="el-icon-check">Double Skin Milk</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check">Oyster Omelet</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
<el-col :span="12">
<span class="demonstration">click to activate</span>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
Drop-down menu <i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-plus">Golden Cake</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus">Lion head</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus-outline">Snail powder</el-dropdown-item>
<el-dropdown-item icon="el-icon-check">Double Skin Milk</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check">Oyster Omelet</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-row>
<style>
.el-dropdown-link {<!-- -->
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {<!-- -->
font-size: 12px;
}
.demonstration {<!-- -->
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
</style>
The page effect is as follows, when the mouse triggers the corresponding event (hover|mouse coverage, click|mouse click), the drop-down menu is displayed.
1.2 Attribute Introduction
Do not hide the expanded drop-down box
By default, the drop-down menu will be hidden after clicking the menu item, and the hide-on-click attribute of el-dropdown defaults to false to close this Function.
Drop-down box selection event
This is actually a command event, which is realized by binding the event function to the command attribute of el-dropdown. When the user selects the corresponding option, the corresponding command value is passed to the event function
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
Drop-down menu <i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="a">Golden Cake</el-dropdown-item>
<el-dropdown-item command="b">Lion head</el-dropdown-item>
<el-dropdown-item command="c">Snail noodles</el-dropdown-item>
<el-dropdown-item command="d" disabled>Double Skin Milk</el-dropdown-item>
<el-dropdown-item command="e" divided>Oyster omelette</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.el-dropdown-link {<!-- -->
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {<!-- -->
font-size: 12px;
}
</style>
<script>
export default {<!-- -->
methods: {<!-- -->
handleCommand(command) {<!-- -->
this.$message('click on item ' + command);
}
}
}
</script>
The event function here is handleCommand, which distinguishes user input by judging the command.
2. The drop-down menu of the list environment
2.1 List usage
Lists often appear when displaying data in vue. Using v-for on the unit container can realize the loop, and then realize the list display.
<template>
<div class="demo-image"
v-loading="loading"
element-loading-text="Waiting for server processing"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
>
<div class="block" v-for="fd in folder_data">
<el-card :body-style="{ padding: '0px' }">
<div class="folderImg" :class="fd.type">
<i class="el-icon-folder-opened avatar-uploader-icon"></i>
</div>
</el-card>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {<!-- -->
name: 'showdatafolder',
inject: ['reload'],
data() {<!-- -->
return {<!-- -->
folder_data: [],
loading: false,
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
}
},
mounted() {<!-- -->
axios({<!-- -->
url: '/api/datamanage_get_folder_list',
method: "get",
}).then((res) => {<!-- -->
this.folder_data=res.data;
});
},
}
</script>
2.2 List stacked drop-down menu
In vue, the event bound to any control is set as a variable, so multiple el-dropdowns generated in v-for can only be bound to the same event. Although the event bound to el-dropdown is fixed, the command bound to el-dropdown-item in each for loop can be dynamic, which supports combining variable information during for training with strings.
The specific use cases are as follows:
<template>
<div class="demo-image"
v-loading="loading"
element-loading-text="Waiting for server processing"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
>
<div class="block" v-for="fd in folder_data">
<el-card :body-style="{ padding: '0px' }">
<div class="folderImg" :class="fd.type" @click="to_url('showimglist',fd.name)">
<i class="el-icon-folder-opened avatar-uploader-icon"></i>
</div>
<div style="padding: 4px;">
<time class="time">{<!-- -->{ fd.name }}</time><br />
<span>Number: {<!-- -->{ fd.labelnum }} / {<!-- -->{ fd.imgnum }} </span>
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
Operation <i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="'image_resize|' + fd.name" icon="el-icon-picture">image resize</el-dropdown-item>
<el-dropdown-item :command="'split_dataset|' + fd.name" icon="el-icon-help">Split dataset</el-dropdown-item>
<el-dropdown-item :command="'data_analysis|' + fd.name" icon="el-icon-s-tools">data set analysis</el-dropdown-item>
<el-dropdown-item :command="'draw_label|' + fd.name" icon="el-icon-s-tools">Data visualization</el-dropdown-item>
<el-dropdown-item :command="'delete_label|' + fd.name" icon="el-icon-s-tools">Delete visualization</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<div class="bottom clearfix">
<el-button type="text" class="button" @click="to_url('labelimg',fd.name)" >label</el-button>
<el-button type="text" class="button" @click="delete_folder(fd.name)">Delete</el-button>
</div>
</div>
</el-card>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {<!-- -->
name: 'showdatafolder',
inject: ['reload','callServerApi'],
data() {<!-- -->
return {<!-- -->
folder_data: [],
loading: false,
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
}
},
mounted() {<!-- -->
axios({<!-- -->
url: '/api/datamanage_get_folder_list',
method: "get",
}).then((res) => {<!-- -->
this.folder_data=res.data;
});
},
methods: {<!-- -->
handleCommand(command) {<!-- -->
var list = command. split("|");
var func = list[0];
var dataset = list[1];
if (func == 'image_resize') {<!-- -->
this.callServerApi('datamanage_resize_img',{<!-- -->dname:dataset})
} else if (func == 'split_dataset') {<!-- -->
this.callServerApi('datamanage_splitdata',{<!-- -->dname:dataset})
} else if (func == 'draw_label') {<!-- -->
this.callServerApi('datamanage_dataanalysis',{<!-- -->dname:dataset,viewdata:true,target:'showimglist'})
} else if (func == 'data_analysis') {<!-- -->
this.callServerApi('datamanage_dataanalysis',{<!-- -->dname:dataset,target:'showanalysis'})
} else if (func == 'delete_label') {<!-- -->
this.callServerApi('datamanage_dataanalysis',{<!-- -->dname:dataset,clear:true})
}
},
},
}
</script>
The key operations are as follows. The events bound to sub-controls in each el-dropdown-menu have similarities and differences. The first part of the command instruction in the same sequence of el-dropdown-items is the same, but the latter part is different; in the same for loop The latter part of the command in el-dropdown-item is the same. That is to say, a command command contains command and parent control information, and the command and operation object information can be obtained after dividing the original command by |
<div class="block" v-for="fd in folder_data">
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
Operation <i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="'data_analysis|' + fd.name" icon="el-icon-s-tools">data set analysis</el-dropdown-item>
<el-dropdown-item :command="'data_split|' + fd.name" icon="el-icon-s-tools">data set division</el-dropdown-item>
</el-dropdown-menu>
</div>
Based on this, the realized instruction events are as follows. First, divide the original instruction, set the first part as the instruction content, and set the second part as the operation object. Based on this, it is possible to distinguish the objects to be operated by each drop-down menu when the list is stacked.
handleCommand(command) {<!-- -->
var list = command. split("|");
var func = list[0];
var dataset = list[1];
if (func == 'image_resize') {<!-- -->
this.callServerApi('datamanage_resize_img',{<!-- -->dname:dataset})
} else if (func == 'split_dataset') {<!-- -->
this.callServerApi('datamanage_splitdata',{<!-- -->dname:dataset})
} else if (func == 'draw_label') {<!-- -->
this.callServerApi('datamanage_dataanalysis',{<!-- -->dname:dataset,viewdata:true,target:'showimglist'})
} else if (func == 'data_analysis') {<!-- -->
this.callServerApi('datamanage_dataanalysis',{<!-- -->dname:dataset,target:'showanalysis'})
} else if (func == 'delete_label') {<!-- -->
this.callServerApi('datamanage_dataanalysis',{<!-- -->dname:dataset,clear:true})
}
},
The final effect of the business interface is as follows
3. Dropdown menu in table
3.1 Form usage
In the form, the formatted content can be specified based on the xxx format. For details, please refer to https://element.faas.ele.me Custom column templates in /#/en-US/component/table
The :command setting of el-dropdown-item here is similar to Chapter 2, and the extra information is connected through | . The difference is that v-for is used to generate multiple el-dropdown-items. In the following code, the event bound to the switch type is the changeTableLabel event
<el-table :data="tableData" height="600" style="width: 150px" highlight-current-row
@current-change="handleTableCurrentChange">
<el-table-column type="index" label="number" width="40">
</el-table-column>
<el-table-column prop="label" label="type" width="110" align="center">
<template slot-scope="scope">
<el-dropdown @command="changeTableLabel">
<span class="el-dropdown-link">
{<!-- -->{ scope.row.label }}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="tag in dynamicTags" :command="scope.row.id + '|' + tag">{<!-- -->{ tag
}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-button @click="deleteTableRow(scope.row.id)" type="text" size="small">Delete</el-button>
</template>
</el-table-column>
</el-table>
3.2 Event Implementation
In the changeTableLabel function, the split operation is performed on the parameters, and multiple pieces of information are parsed from one parameter. Its first information is used to describe the line of operation, and the second information is used to describe the value set.
//Modify the value of the label in the table
changeTableLabel(command) {<!-- -->
var list = command. split("|");
var tagId = list[0];//Get the first information in the parameter to distinguish the line of operation
var newCls = list[1];//Get the second information in the parameter to set the specific value
// usage information
//Update the label value in the form
for (let i = 0; i <this.tableData.length; i ++ ) {<!-- -->
if (this.tableData[i].id == tagId) {<!-- -->
this.tableData[i].label = newCls;
}
}
this.label_changed = true;
//Update the type and color in the drawing in ilabel
this.$message(tagId + ' --- ' + newCls);
}