vue uses Ele.me UI to imitate the filtering function of teambition
Problem DescriptionTeambition software is an enterprise office collaboration software. I believe some of my friends’ companies have used this software. The filtering function in it is quite interesting. This article is to imitate its function. Let’s take a look at the final result.
The general functional effects are as follows
Thought AnalysisFor requirements one and two, we first need to create two full-screen pop-up boxes, and then define two arrays in the data, one for commonly used conditions, and the other for uncommon conditions. Common conditions are v-fored into the first pop-up box, and uncommon conditions are v-fored into the second pop-up box. Each item in the array must be configured with corresponding content, such as the name of the filtering field, such as name, age, etc. After we have the name of the filter field, there is also a type. In HTML, we need to write three types of components, such as input box component, select component, and time selector component. Use v-show to display the corresponding fields according to the type type, for example, the input type is 1, the select type is 2, and the time selector type is 3. The component to be displayed is the type. The corresponding two arrays are as follows:
topData: [ //Configure common filter items {
wordTitle: "Name",
type: 1, // 1 is input 2 is select 3 is DatePicker
content: "", // content is the input data bound to the input box options: [], // options are all the contents of the drop-down box, you can send a request to get it and save it, here is the simulation optionArr: [], // optionArr is the selected drop-down box content timeArr: [], // timeArr is the date selection interval },
{
wordTitle: "Age",
type: 1,
content: "",
options: [],
optionArr: [],
timeArr: [],
},
{
wordTitle: "Teaching Class",
type: 2,
content: "",
options: [ // Send a request to get the drop-down box options {
id: 1,
value: "Class 1",
},
{
id: 2,
value: "Class 2",
},
{
id: 3,
value: "Three shifts",
},
],
optionArr: [],
timeArr: [],
},
{
wordTitle: "Joining Time",
type: 3,
content: "",
options: [],
optionArr: [],
timeArr: [],
},
],
bottomData: [ //Configure uncommon filter items {
wordTitle: "Work Number",
type: 1,
content: "",
options: [],
optionArr: [],
timeArr: [],
},
{
wordTitle: "Gender",
type: 2,
content: "",
options: [
{
id: 1,
value: "Male",
},
{
id: 2,
value: "Female",
},
],
optionArr: [],
timeArr: [],
},
],The corresponding html code is as follows:
<div class="rightright">
<el-input
v-model.trim="item.content"
clearable
v-show="item.type == 1"
placeholder="Please enter"
size="small"
:popper-append-to-body="false"
></el-input>
<el-select
v-model="item.optionArr"
v-show="item.type == 2"
multiple
placeholder="Please select"
>
<el-option
v-for="whatItem in item.options"
:key="whatItem.id"
:label="whatItem.value"
:value="whatItem.id"
size="small"
>
</el-option>
</el-select>
<el-date-picker
v-model="item.timeArr"
v-show="item.type == 3"
type="daterange"
range-separator="to"
start-placeholder="start date"
end-placeholder="end date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</div>
For requirements three and four, it can be described as deleting the upper ones and dropping them to the lower ones. Click below to jump to the top. So the corresponding operation is to append an item from the upper array to the lower array, and then delete the item from the upper array; append an item from the lower array to the upper array, and then delete this row. (Note that there is also an index) The corresponding code is as follows:
/* Click the delete icon of an item to add the item to the bottomData array and then delete the item from the topData array (determine which item it is based on the index)
Finally, delete one and set the index to the initial index - 1 */
clickIcon(i) {
this.bottomData.push(this.topData[i]);
this.topData.splice(i, 1);
this.whichIndex = -1;
},
// When clicking on the bottom item, use the event object to see which item is clicked at the bottom // and then append the corresponding item to topData for display, and delete the item in the bottom array // clickBottomItem(event) {
this.bottomData.forEach((item, index) => {
if (item.wordTitle == event.target.innerText) {
this.topData.push(item);
this.bottomData.splice(index, 1);
}
});
},
Requirements 5 and 6 are simple. The corresponding codes are as follows. The complete code comments have been written. Complete code
<template>
<div id="app">
<div class="filterBtn">
<el-button type="primary" size="small" @click="filterMaskOne = true">
Data Filter<i class="el-icon-s-operation el-icon--right"></i>
</el-button>
<transition name="fade">
<div
class="filterMaskOne"
v-show="filterMaskOne"
@click="filterMaskOne = false"
>
<div class="filterMaskOneContent" @click.stop>
<div class="filterHeader">
<span>Data Filtering</span>
</div>
<div class="filterBody">
<div class="outPrompt" v-show="topData.length == 0">
There are no filter conditions yet, please add filter conditions...
</div>
<div
class="filterBodyCondition"
v-for="(item, index) in topData"
:key="index"
>
<div
class="leftleft"
@mouseenter="mouseEnterItem(index)"
@mouseleave="mouseLeaveItem(index)"
>
<span
>{{ item.wordTitle }}:
<i
class="el-icon-error"
v-show="whichIndex == index"
@click="clickIcon(index)"
></i>
</span>
</div>
<div class="rightright">
<el-input
v-model.trim="item.content"
clearable
v-show="item.type == 1"
placeholder="Please enter"
size="small"
:popper-append-to-body="false"
></el-input>
<el-select
v-model="item.optionArr"
v-show="item.type == 2"
multiple
placeholder="Please select"
>
<el-option
v-for="whatItem in item.options"
:key="whatItem.id"
:label="whatItem.value"
:value="whatItem.id"
size="small"
>
</el-option>
</el-select>
<el-date-picker
v-model="item.timeArr"
v-show="item.type == 3"
type="daterange"
range-separator="to"
start-placeholder="start date"
end-placeholder="end date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
>
</el-date-picker>
</div>
</div>
</div>
<div class="filterFooter">
<div class="filterBtn">
<el-button
type="text"
icon="el-icon-circle-plus-outline"
@click="filterMaskTwo = true"
>Add filter condition</el-button
>
<transition name="fade">
<div
class="filterMaskTwo"
v-show="filterMaskTwo"
@click="filterMaskTwo = false"
>
<div class="filterMaskContentTwo" @click.stop>
<div class="innerPrompt" v-show="bottomData.length == 0">
No content yet...
</div>
<div
class="contentTwoItem"
@click="clickBottomItem"
v-for="(item, index) in bottomData"
:key="index"
>
<div class="mingzi">
{{ item.wordTitle }}
</div>
</div>
</div>
</div>
</transition>
</div>
<div class="resetAndConfirmBtns">
<el-button size="small" @click="resetFilter">Reset</el-button>
<el-button type="primary" size="small" @click="confirmFilter"
>Confirm</el-button
>
</div>
</div>
</div>
</div>
</transition>
</div>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
filterMaskOne: false, // Used to control the display and hiding of two pop-up boxes respectively filterMaskTwo: false,
whichIndex: -1, // Index used to record clicks apiFilterArr:[], // Store the filter content filled in by the user topData: [ // Configure common filter items {
wordTitle: "Name",
type: 1, // 1 is input 2 is select 3 is DatePicker
content: "", // content is the input data bound to the input box options: [], // options is all the drop-down box contents optionArr: [], // optionArr is the selected drop-down box content timeArr: [], // timeArr is the date selection interval },
{
wordTitle: "Age",
type: 1,
content: "",
options: [],
optionArr: [],
timeArr: [],
},
{
wordTitle: "Teaching Class",
type: 2,
content: "",
options: [ // Send a request to get the drop-down box options {
id: 1,
value: "Class 1",
},
{
id: 2,
value: "Class 2",
},
{
id: 3,
value: "Three shifts",
},
],
optionArr: [],
timeArr: [],
},
{
wordTitle: "Joining Time",
type: 3,
content: "",
options: [],
optionArr: [],
timeArr: [],
},
],
bottomData: [ //Configure uncommon filter items {
wordTitle: "Work Number",
type: 1,
content: "",
options: [],
optionArr: [],
timeArr: [],
},
{
wordTitle: "Gender",
type: 2,
content: "",
options: [
{
id: 1,
value: "Male",
},
{
id: 2,
value: "Female",
},
],
optionArr: [],
timeArr: [],
},
],
};
},
mounted() {
// When initializing the load, we save a copy of the commonly used and uncommonly used filter items we configured. // When the user clicks the reset button, we retrieve it and restore it to the original filter condition state. sessionStorage.setItem("topData",JSON.stringify(this.topData))
sessionStorage.setItem("bottomData",JSON.stringify(this.bottomData))
},
methods: {
//Move the mouse to display the delete icon mouseEnterItem(index) {
this.whichIndex = index;
},
// When the mouse leaves, the index returns to the default value -1
mouseLeaveItem() {
this.whichIndex = -1;
},
/* Click the delete icon of an item to add the item to the bottomData array and then delete the item from the topData array (determine which item it is based on the index)
Finally, delete one and set the index to the initial index - 1 */
clickIcon(i) {
this.bottomData.push(this.topData[i]);
this.topData.splice(i, 1);
this.whichIndex = -1;
},
// When clicking on the bottom item, use the event object to see which item is clicked at the bottom // and then append the corresponding item to topData for display, and delete the item in the bottom array // clickBottomItem(event) {
this.bottomData.forEach((item, index) => {
if (item.wordTitle == event.target.innerText) {
this.topData.push(item);
this.bottomData.splice(index, 1);
}
});
},
// Click to confirm the filter async confirmFilter() {
// If the content of all input boxes is empty, the selected drop-down box array is empty, and the array selected by the time selector is empty, it means that the user has not entered any content, so we prompt the user to enter content before filtering let isEmpty = this.topData.every((item)=>{
return (item.content == "") && (item.optionArr.length == 0) && (item.timeArr.length == 0)
})
if(isEmpty == true){
this.$alert('Please enter the content before filtering', 'Filter Tips', {
confirmButtonText: 'Confirm'
});
}else{
// Collect parameters and send filtering requests. Here we need to classify them by type, save the non-empty user input content into the array for data filtering, and then send the request to the backend.
this.topData.forEach((item)=>{
if(item.type == 1){
if(item.content != ""){
let filterItem = {
field:item.wordTitle,
value:item.content
}
this.apiFilterArr.push(filterItem)
}
}else if(item.type == 2){
if(item.optionArr.length > 0){
let filterItem = {
field:item.wordTitle,
value:item.optionArr
}
this.apiFilterArr.push(filterItem)
}
}else if(item.type == 3){
if(item.timeArr.length > 0){
let filterItem = {
field:item.wordTitle,
value:item.timeArr
}
this.apiFilterArr.push(filterItem)
}
}
})
// Put the filtered content into an array and pass it to the backend (of course, the parameters do not necessarily need to be put into the array)
// The specific form of passing it to the backend can be discussed in detail console.log("Send request with filtered content", this.apiFilterArr);
}
},
// When resetting, take out the initial configuration filter items and assign them to the corresponding two arrays resetFilter() {
this.topData = JSON.parse(sessionStorage.getItem("topData"))
this.bottomData = JSON.parse(sessionStorage.getItem("bottomData"))
},
},
};
</script>
<style lang="less" scoped>
.filterBtn {
width: 114px;
height: 40px;
.filterMaskOne {
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
background-color: rgba(0, 0, 0, 0.3);
.filterMaskOneContent {
position: absolute;
top: 152px;
right: 38px;
width: 344px;
height: 371px;
background-color: #fff;
box-shadow: 0px 0px 4px 3px rgba(194, 194, 194, 0.25);
border-radius: 4px;
.filterHeader {
width: 344px;
height: 48px;
border-bottom: 1px solid #e9e9e9;
span {
display: inline-block;
font-weight: 600;
font-size: 16px;
margin-left: 24px;
margin-top: 16px;
}
}
.filterBody {
width: 344px;
height: 275px;
overflow-y: auto;
overflow-x:hidden;
box-sizing: border-box;
padding: 12px 24px 0 24px;
.outPrompt {
color: #666;
}
.filterBodyCondition {
width: 100%;
min-height: 40px;
display: flex;
margin-bottom: 14px;
.leftleft {
width: 88px;
height: 40px;
display: flex;
align-items: center;
margin-right: 20px;
span {
position: relative;
font-size: 14px;
color: #333;
i {
color: #666;
right: -8px;
top: -8px;
position: absolute;
font-size: 15px;
cursor: pointer;
}
i:hover {
color: #5f95f7;
}
}
}
.rightright {
width: calc(100% - 70px);
height: 100%;
/deep/ input::placeholder {
color: rgba(0, 0, 0, 0.25);
font-size: 13px;
}
/deep/ .el-input__inner {
height: 40px;
line-height: 40px;
}
/deep/ .el-select {
.el-input--suffix {
/deep/ input::placeholder {
color: rgba(0, 0, 0, 0.25);
font-size: 13px;
}
.el-input__inner {
border: none;
}
.el-input__inner:hover {
background: rgba(95, 149, 247, 0.05);
}
}
}
.el-date-editor {
width: 100%;
font-size: 12px;
}
.el-range-editor.el-input__inner {
padding-left: 2px;
padding-right: 0;
}
/deep/.el-range-input {
font-size: 13px !important;
}
/deep/ .el-range-separator {
padding: 0 !important;
font-size: 12px !important;
width: 8% !important;
margin: 0;
}
/deep/ .el-range__close-icon {
width: 16px;
}
}
}
}
.filterFooter {
width: 344px;
height: 48px;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding-left: 24px;
padding-right: 12px;
border-top: 1px solid #e9e9e9;
.filterBtn {
.filterMaskTwo {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: 1000;
.filterMaskContentTwo {
width: 240px;
height: 320px;
background: #ffffff;
box-shadow: 0px 0px 4px 3px rgba(194, 194, 194, 0.25);
border-radius: 4px;
position: absolute;
top: 360px;
right: 180px;
overflow-y: auto;
box-sizing: border-box;
padding: 12px 0 18px 0;
overflow-x:hidden;
.innerPrompt {
color: #666;
width: 100%;
padding-left: 20px;
margin-top: 12px;
}
.contentTwoItem {
width: 100%;
height: 36px;
line-height: 36px;
font-size: 14px;
color: #333333;
cursor: pointer;
.mingzi {
width: 100%;
height: 36px;
box-sizing: border-box;
padding-left: 18px;
}
}
.contentTwoItem:hover {
background: rgba(95, 149, 247, 0.05);
}
}
}
}
}
}
}
}
// Control the fade-in and fade-out effects.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
SummarizeWhat you need to pay attention to here is that when the mouse moves in and out, the corresponding small delete icon will be displayed. This is roughly the idea. It’s not easy to write code, so let’s work together. The above is the details of how vue uses the Ele.me UI to imitate the filtering function of teambition. For more information about vue’s imitation of teambition’s filtering function, please pay attention to other related articles on 123WORDPRESS.COM! You may also be interested in:
|
<<: A simple example of mysql searching for data within N kilometers
Recommend
MySQL tutorial thoroughly understands stored procedures
Table of contents 1. Concepts related to stored p...
HTML table markup tutorial (4): border color attribute BORDERCOLOR
To beautify the table, you can set different bord...
MySQL trigger simple usage example
This article uses examples to illustrate the simp...
Common failures and reasons for mysql connection failure
=================================================...
How to limit access frequency, download rate and number of concurrent connections in Nginx
1. Overview of modules and instructions used to l...
Detailed explanation of Mysql logical architecture
1. Overall architecture diagram Compared to other...
Use iptables and firewalld tools to manage Linux firewall connection rules
Firewall A firewall is a set of rules. When a pac...
Steps for restoring a single MySQL table
When I was taking a break, a phone call completel...
MySQL 5.7.27 installation and configuration method graphic tutorial
The installation tutorial of MySQL 5.7.27 is reco...
HTML fixed title column, title header table specific implementation code
Copy code The code is as follows: <!DOCTYPE ht...
MySQL 8.0.18 deployment and installation tutorial under Windows 7
1. Preliminary preparation (windows7+mysql-8.0.18...
Solution to the MySQL server has gone away error
MySQL server has gone away issue in PHP 1. Backgr...
How to open ports to the outside world in Alibaba Cloud Centos7.X
In a word: if you buy a cloud server from any maj...
React Router V6 Updates
Table of contents ReactRouterV6 Changes 1. <Sw...
Does Mysql ALTER TABLE lock the table when adding fields?
Table of contents Before MySQL 5.6 After MySQL 5....