Shulou(Shulou.com)06/02 Report--

This article mainly introduces "avue how to achieve custom search bar and emptying search events". In daily operation, I believe many people have doubts about how to achieve custom search bar and emptying search events in avue. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how to achieve custom search bar and emptying search events in avue". Next, please follow the editor to study!

Customize the search bar and achieve the effect of folding the search bar through buttons. The customization effect is as follows:

Before folding:

After folding:

1. Customize the content of search bar

In fact, it is also simple, as long as\ src\ views\ admin\ sysxxfsjl.vue sets the slot-scope= "scope" and slot= "search" properties on template in the corresponding vue file to customize the search bar content:

System messages, SMS messages, Wechat sends all Have you read it or not?

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.length-1]} else { Delete this.searchForm.fsrid} if (this.sfyd.length > 0) {/ / whether to transfer 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.CheckListListy scheduled requests') {/ / whether to transfer 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 iTunes 0) I {this.tableLoading=false})}, 2. Custom search button

Template sets the slot-scope= "scope" and slot= "searchMenu" properties to customize the search button, plus more buttons:

Hide more

More, hide button call methods to show and hide the search term

Getmoreshow (type) {if (type==1) {this.moreshow=false} else {this.moreshow=true}}

To clear the button, add the @ search-reset event to the avue-crud. Clear the option contents and call this.getList (this.page)

/ / search for emptying button event searchReset () {this.searchForm = {} this.searchForm.sfyd=''if (this.searchForm.sfydpermission requests') {/ / whether to transfer 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);}, at this point, the study on "how avue implements a custom search bar and emptying search events" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.