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
How to elegantly back up MySQL account information
Preface: I recently encountered the problem of in...
Detailed explanation of angular parent-child component communication
Table of contents APIs used Simple Example person...
How to count down the date using bash
Need to know how many days there are before an im...
Mysql modify stored procedure related permissions issue
When using MySQL database, you often encounter su...
10 Underused or Misunderstood HTML Tags
Here are 10 HTML tags that are underused or misun...
Implementation code for installing vsftpd in Ubuntu 18.04
Install vsftpd $ sudo apt-get install vsftpd -y S...
Detailed explanation of Vue's simple store
The simplest application of store in Vue is globa...
Introduction to user management under Linux system
Table of contents 1. The significance of users an...
A brief analysis of the four import methods and priorities in CSS
First: 4 ways to introduce CSS There are four way...
Detailed explanation of how to use Node.js to implement hot reload page
Preface Not long ago, I combined browser-sync+gul...
Detailed explanation of binary and varbinary data types in MySQL
Preface BINARY and VARBINARY are somewhat similar...
Docker /var/lib/docker/aufs/mnt directory cleaning method
The company's service uses docker, and the di...
Detailed explanation of MySQL delayed replication library method
Simply put, delayed replication is to set a fixed...
Detailed explanation of the principle of creating tomcat in Eclipse
When creating a tomcat server on a local eclipse,...
202 Free High Quality XHTML Templates (1)
Here 123WORDPRESS.COM presents the first part of ...