Practice of implementing custom search bar and clearing search events in avue
|
Customize the search bar and use a button to collapse the search bar. The customization effects are as follows: Before folding:
After folding:
1. Customize the search bar contentIn fact, it is also simple. Just set the slot-scope="scope" and slot="search" attributes for the template in the corresponding vue file \src\views\admin\sysxxfsjl.vue to customize the search bar content:
<template slot-scope="scope" slot="search">
<el-form ref="form" :model="searchForm" style="width: 830px;margin-left: -10px; display: inline-block;" label-width="100px">
<el-row>
<el-form-item label="Subject:">
<el-input v-model="searchForm.xxbt" style="width: 238px;margin-left: -100px" @change="getList()"></el-input>
</el-form-item>
<el-form-item label="Sender:">
<el-cascader
v-model="fsrid"
:options="options"
clearable
style="width: 242px !important;margin-left: -100px"
:props="{ expandTrigger: 'hover' }"
@change="getList()"></el-cascader>
</el-form-item>
</el-row>
<el-row v-show="moreshow">
<el-form-item label="Send time:">
<el-date-picker
style="width: 238px !important; margin-left: -100px"
v-model="timeSlot"
type="daterange"
align="right"
unlink-panels
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="to"
start-placeholder="start date"
end-placeholder="end date"
:picker-options="pickerOptions"
@change="getList()">
</el-date-picker>
</el-form-item>
<el-form-item label="Method:" >
<el-radio-group v-model="searchForm.fsfs" size="small" style="margin-left: -100px" @change="getList()">
<el-radio-button label="4">System Message</el-radio-button>
<el-radio-button label="1">Mobile SMS</el-radio-button>
<el-radio-button label="3">Send via WeChat</el-radio-button>
</el-radio-group>
</el-form-item>
</el-row>
<el-row v-show="moreshow">
<el-form-item label="Reading status:">
<el-radio-group v-model="sfyd" size="small" style="margin-left: -100px;width: 238px" @change="getList()">
<el-radio-button label="2">All</el-radio-button>
<el-radio-button label="1">Read</el-radio-button>
<el-radio-button label="0">Unread</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="Transfer to To-Do:">
<el-radio-group v-model="checkList" style="margin-left: -100px" @change="getList()">
<el-radio-button label="1">Yes</el-radio-button>
<el-radio-button label="0">No</el-radio-button>
</el-radio-group>
</el-form-item>
</el-row>
</el-form>
</template>
The search button calls the method in getList to assign data to the table
getList(page, params) {
this.tableData = []
if (this.timeSlot && this.timeSlot.length == 2) {//Send time this.searchForm.startTime = this.timeSlot[0].replace(/\+/g, ' ')
this.searchForm.endTime = this.timeSlot[1].replace(/\+/g, ' ')
}else {
delete this.searchForm.startTime
delete this.searchForm.endTime
}
if (this.fsrid.length){//Sender this.searchForm.fsrid = this.fsrid[this.fsrid.length-1]
}else {
delete this.searchForm.fsrid
}
if (this.sfyd.length>0){//Whether to transfer to to-do if (this.sfyd== 1){
this.searchForm.sfyd = 1
}else if (this.sfyd == 0){
this.searchForm.sfyd = 0
}else {
delete this.searchForm.sfyd
}
}else {
delete this.searchForm.sfyd
}
if (this.checkList!=''){//Whether to transfer to to-do if (this.checkList== '1'){
this.searchForm.sfdb = 1
}else {
this.searchForm.sfdb = 0
}
}else {
delete this.searchForm.sfdb
}
if (!page) {
page = this.page
}
this.tableLoading = true
fetchList(Object.assign({
current: page.currentPage,
size: page.pageSize
}, params, this.searchForm )).then(response => {
for(var i=0;i<response.data.data.records.length;i++){
response.data.data.records[i].checkbox=[]
if(response.data.data.records[i].sfyd==0){
response.data.data.records[i].checkbox.push('unread')
}else{
response.data.data.records[i].checkbox.push('read')
}
if(response.data.data.records[i].sfdb==1){
response.data.data.records[i].checkbox.push('To be done')
}
if(response.data.data.records[i].sfsc==1){
response.data.data.records[i].checkbox.push('Collection')
}
if(response.data.data.records[i].sfhf==1){
response.data.data.records[i].checkbox.push('has replied')
}
if(response.data.data.records[i].xxfjmc){
response.data.data.records[i].xxfjmc=response.data.data.records[i].xxfjmc.split(',')
}else{
response.data.data.records[i].xxfjmc=[]
}
this.tableData.push(response.data.data.records[i])
}
this.page.total = response.data.data.total
this.tableLoading = false
}).catch(() => {
this.tableLoading=false
})
},
2. Customize the search buttontemplate Setting slot-scope="scope" and slot="searchMenu" attributes can customize the search button and add more buttons:
<template slot-scope="scope" slot="searchMenu">
<el-button v-if="moreshow" type="success" class="el-button--small" icon="el-icon-caret-top" @click="getmoreshow(1)">Hide</el-button>
<el-button v-else class="el-button--small" icon="el-icon-caret-bottom" @click="getmoreshow(2)">More</el-button>
</template>
More and Hide buttons call methods to show and hide search items
getmoreshow(type){
if(type==1){
this.moreshow=false
}else{
this.moreshow=true
}
},
To clear the button , add the @search-reset event to avue-crud. Clear the options and call this.getList(this.page);
//Search clear button event searchReset(){
this.searchForm = {}
this.searchForm.sfyd = ''
if (this.searchForm.sfyd!=''){//Whether to transfer to to-do if (this.searchForm.sfyd== '1'){
this.searchForm.sfyd = 1
}else {
this.searchForm.sfyd = 0
}
}else {
delete this.searchForm.sfyd
}
this.fsrid = []
this.timeSlot = []
this.checkList = ''
this.sfyd = ''
this.$refs.crud.toggleSelection();
this.getList(this.page);
},
This is the end of this article about the practice of implementing custom search bar and clearing search events in avue. For more related avue custom search bar and clearing search content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Detailed explanation of the default values of width and height in CSS: auto and %
>>: MySQL automatically inserts millions of simulated data operation code
Recommend
Designing the experience: What’s on the button
<br />Recently, UCDChina wrote a series of a...
HTML introductory tutorial HTML tag symbols quickly mastered
Side note <br />If you know nothing about HT...
Solve the problem of yum installation error Protected multilib versions
Today, when installing nginx on the cloud server,...
HTML commonly used meta encyclopedia (recommended)
The Meta tag is an auxiliary tag in the head area...
Some properties in CSS are preceded by "*" or "_".
Some properties in CSS are preceded by "*&qu...
Understanding Vuex in one article
Table of contents Overview Vuex four major object...
Detailed explanation of the implementation method and usage of CSS3 border-radius rounded corners
In the past, it was quite troublesome to achieve ...
HTML form tag usage learning tutorial
Forms in HTML can be used to collect various type...
hr horizontal line style example code
Copy code The code is as follows: <hr style=&q...
vue3 timestamp conversion (without using filters)
When vue2 converts timestamps, it generally uses ...
Writing tab effects with JS
This article example shares the specific code for...
Detailed explanation of the encapsulation and use of the Vue image magnifier component
Based on the Vue image magnifier component packag...
mysql settings to change the root password, mysql server connection, mysql common commands diagram
1. Set and change the root password Check whether...
Exploration and correction of the weird behavior of parseInt() in js
Background: I wonder if you have noticed that if ...
Steps to transfer files and folders between two Linux servers
Today I was dealing with the issue of migrating a...