Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how VUE+element develops the search function of background management". The editor shows you the operation process through the actual case. The operation method is simple, fast and practical. I hope that this article "how to develop the search function of background management in VUE+element" can help you solve the problem.

First take a look at the style diagram:

There are three simple steps to achieving the above simple search:

1. Page style: use the check function of the form form in the page to implement the input search. The data for the form is put into the data array of the search request, that is, the large collection of searchParams.

Note: if you add the click method of the search button to each input box, the list search will be performed directly after the input is complete. So consider the specific location you use.

Empty the new project

The empty function empties the contents of the search input box and actually resets the entire page. Distinguish between refreshing the page and not refreshing it. If you don't refresh it, empty the input directly, and if you reset it, go through the list to initialize the load.

2.JS configuration content: search and first load request are an interface that can directly combine parameters. Search is performed if there is search input, and default content is loaded if there is no content. Empty the search and format the form directly.

Data () {return {currentPage: 1, totalResult:0, chanelList: [{value: 0, name: 'online'}, {value: 1 Name: 'offline'}, {value: 2, name: 'collection'}], searchParams: {remark:'', chanelName:'' ChanelType:', pageSize: 10, pageIndex: 0},}}, created () {this.getList ()} Methods: {/ / get list data num (same below): prototype 1 of the selected mobile car-default request type tripartite ID / / network name storeName ID cardId getList () {let method = 'GET' let url = `/ etcMan/ channelList` let dd = { ChannelName: this.searchParams.chanelName | |'' ChannelType: this.searchParams.chanelType, remarks: this.searchParams.remark | |', pageIndex: this.searchParams.pageIndex | | 0, pageSize: this.searchParams.pageSize | 10} this.axios ({url: url + devCode) Method: method, baseURL: baseUrl, params: dd}) .then (res = > {res = res.data this.tableData = res.data.pageListData? Res.data.pageListData: [] this.totalResult = res.data.totalResult})}, / / search list num (same below) submitSearch () {this.searchParams.pageIndex = 0 this.getList () this.currentPage = 1} / / format form data clearForm () {this.searchParams = {chanelName:', remark:', chanelType:', pageIndex: 0, pageSize: 10}} / / clear the search form clearListSearch () {this.clearForm () this.getList ()} of the list

3. It is to adjust and test, and correspond to the parameters entered in the search. In the case of a specific value, the search for 0 or other values will be directly passed into empty, so at this time, it is necessary to consider that the parameters requested by the list are not empty and directly fill in the name of the parameters to be searched. If this parameter is passed or not, it will not be passed, so as to avoid the occurrence of zero or other values that are directly passed into empty.

This is the end of the content about "how to develop the search function managed by the background in VUE+element". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.