Query the encapsulation of input output

Recently, I was fortunate enough to make a management system using VUE + Element-UI. There are a lot of form pages, and they are surprisingly large. I would like to talk about the advantages and disadvantages of making a large form when developing multiple pages

Get straight to the point

It works like this:

When I click the button, the query box will pop up. There is a small list in the box. After I find the data, I will click a line and then display it. But the little queries that pop up would be a lot harder to repeat for each form, for each individual popup, but it would be a lot easier for us to pull it out, to control the function through the data

Some people may think it’s nonsense, and there’s no need to write so much about such a simple thing (I want to say as much as I can, manually funny).

To do is this query list, we get to do, do plan to write code, avoid writing while change, or you will make the code more and more difficult to maintain, wrote the following found it shouldn’t have to write, to change, lazy, then depressed the reluctant to submit up, although function but yourself looking at all…

1. Analyze requirements: What elements do we need?

A. One form, one table, pagination (layout)
B. N condition boxes, query button, reset button, and other function buttons (inside the form)

There are a few things that are fixed, a form, a table that doesn’t know how many columns, a paging function, a query, and a reset button

By sorting this out, we can construct all elements in the first step. If there may be n elements, we will use one element to occupy the first place. The structure is as follows:

<div class="box"> <div class="form"> <form action=""> <input type="text"> *n </form> </div> <div class="table"> <table> * n < tr > < td > < / td > < / tr > < / table > < / div > < div class = "paging" > < / div > < div class = "button" > < button > query < / button > </button> </div> </div>Copy the code

The *n is what we’re going to create with a loop

2. What methods do we need to implement and which are passed externally

A. the query
B. Click paging to query data
C. reset
D. Data is obtained when a row is selected
E. Triggering of other functions

This makes it very clear that methods implement the remaining four methods, since our data lookup and paging are in the same interface, as I mentioned, paging query and normal query are in the same function

methods: SearchData (pageNum = 0) {searchData(pageNum = 0) {// Query data, ES6 parameter assignment default page 0}, selectRowData(row) {// Select a single row is the trigger function, should have this method in each UI frame table, We just need to implement it}, resetSearchForm() {// reset the form argument}, doFunction(){// perform other functions}}Copy the code

Okay, so what methods need to be passed in from outside, and why

I. The first is a method of querying data

Reason: We need to pass it in externally, this is a query-list component, we definitely don’t apply it to just one interface, but try to make it apply to us in a variety of situations

Ii. Method to pass to the parent component after a single line is selected

In VUE, the child component cannot modify the parent component. In the framework package, most of the author encapsulates dispatch and broadcast, but we apply them to our own projects, so we don’t have to bother. If you want to use them, you can go to the UI framework source to copy a copy and use it. We just pass a function from the parent to the child, and then the child calls this function back to the parent, so we pass a function

Iii. Other execution functions

3. We need vue’s data parameters and determine which are in the component and which are passed in externally

A. Data binding for the FORM from (but we’re not sure how many boxes we need so we’ll leave an extra step here)

That’s right, that’s enough. We’re going to do dynamic configuration so more of that comes from passing

A. Pass in an input array and decide to have several criteria search boxes
B. Pass an array of columns to the table, with the width of each column and the column name
C. Pass in an array of other function button lists
D. Pass in the queried paging parameters
E. Pass in an array of queried data lists

4. With these, we’re just going to implement these things

Let’s start with the structure

<div class="searchAlert"> <div class="inputBox"> <el-form :inline="true" :model="searchForm" class="searchAlertForm" ref="searchForm"> <! <el-form-item V -for="item in inputarr" :key="item.label" :prop="item.dataName"> <el-tooltip :content="item.label" placement="top"> <el-input v-model="searchForm[item.dataName]" :placeholder="item.label" size="mini"></el-input> </el-tooltip> </el-form-item> </el-form> </div> <div class="tableBox"> <el-table :data="searchdatalist" style="width: 100%" size="mini" highlight-current-row @current-change="selectrowdata" :border="true"> <! --> <el-table-column v-for="item in coleumarr" :key="item.label" :prop="item.prop" :label="item.label" :width="item.width"> </el-table-column> </el-table> </div> <! <div class="pagination" v-if="searchpaging"> <el-pagination layout="prev, pager, next" :total="searchpaging.totalPage" :small="true" :page-size="searchpaging.pageSize" @current-change="searchdata"> </el-pagination> </div> <div class="buttonBox"> <el-button size="mini" @click=" resetSearchForm "> <el-button size="mini" @click="searchdata" type="primary"> </el-button size="mini" v-for=" BTN in buttonArr"  :key="btn.name" size="mini" @click="doFunction(btn.name)" :type="btn.type">btn.name</el-button> </div> </div>Copy the code

5. Implement an array structure for looping

A. form(Create a form and place it in an array)
{label:" Name of the input box "dataName:" As the name of the two-way data binding and as the name of the binding prop"}Copy the code

We can’t define the form’s Model structure directly in this component. We need to create it dynamically. We can create an empty object in this component

b. table-col
{label:" column name "prop:" column name" width:" single column width "}Copy the code
c. button
{name:" Event and button name ", type:" button type "}Copy the code

6. Next we implement the method we pass in

SearchCbFn (rowData) {console.log(rowData)}, searchFn(formData, pageNum = 0) { api({formData:formData, PageData :pageNum}). Then (res => {console.log(res.data) this.searchDatalist = res.data.datalist // page display page size control this.searchPaging = { ... pagInfo, pageSize: 5 } }).catch(err => { throw err; })}Copy the code

7. Finally, we need to complete all the parameters passed in

    searchDataList:{}
    searchPaging:{}
Copy the code

Conclusion:

Asked this is the first time I write to share, so should write logic is missing, if you don’t understand what, or Suggestions, please tell me a lot, I put in code: https://github.com/wqliusong/happy component, a single page can be run directly

One of the problems I encountered was that VUE’s two-way data binding can be dynamic. A reminder is that dynamic names after objects should be [], not []. Parameters in data can also be created dynamically. We can solve a lot of problems with this, so we don’t have to worry about its initial data format

Next I will also write a multi-line editing component, although many UIs also have, but the function is a little monotonous, maybe we programmers as long as 1+1=2, can solve all the mathematical problems of the people, I will try to enrich his function, in one is about the dynamic increase of verification conditions of some implementation, I hope you found that interesting