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
Solve the group by query problem after upgrading Mysql to 5.7
Find the problem After upgrading MySQL to MySQL 5...
CSS optimization skills self-practice experience
1. Use css sprites. The advantage is that the smal...
Implementation steps of Mysql merge results and horizontal splicing fields
Preface Recently, I was working on a report funct...
Use of Linux gzip command
1. Command Introduction The gzip (GNU zip) comman...
Detailed explanation of docker's high availability configuration
Docker Compose Docker Compose divides the managed...
The difference between char and varchar in MYSQL
CHAR and VARCHAR types are similar, differing pri...
What is Makefile in Linux? How does it work?
Run and compile your programs more efficiently wi...
Element-ui's built-in two remote search (fuzzy query) usage explanation
Problem Description There is a type of query call...
How to use VUE to call Ali Iconfont library online
Preface Many years ago, I was a newbie on the ser...
Detailed explanation of three ways to cut catalina.out logs in tomcat
1. Log4j for log segmentation 1) Prepare three pa...
Docker deployment of Kafka and Spring Kafka implementation
This article mainly introduces the deployment of ...
Several situations that cause MySQL to perform a full table scan
Table of contents Case 1: Case 2: Case 3: To summ...
Multiple ways to calculate age by birthday in MySQL
I didn't use MySQL very often before, and I w...
Use Smart CSS to apply styles based on the user's scroll position
By adding the current scroll offset to the attrib...
A brief discussion on the implementation of fuzzy query using wildcards in MySQL
In the MySQL database, when we need fuzzy query, ...