The origin of

The requirement is to enter an array in the front end as a parameter to the back-end interface. The front-end UI framework of the project adopts Element-UI. The author “skillfully uses” the

tag and adds a series of attributes such as multiple selection. The code is as follows:

<el-select
    v-model.trim="scope.row.query"
    multiple/ / multi-selectfilterable 
    default-first-option
    allow-create 
    placeholder="Please enter variable query statement">
</el-select>
Copy the code

This allows the user to add elements to the array in an input box by looping -> Enter. The following is an example:

(Details of this project can be found in project Origins)

You can see that this approach works well for both interactive experience and front-end aesthetics.

However, the following problem was encountered.

The problem

This method does not work when the same parameters are in the array, because el-select will automatically de-duplicate them for you, as shown in the following example:

This is… .

Ok… .

Because this scenario exists in my project (see the locators parameter in my dict_GET function for details), it is not a default that the same elements will not appear in the array.

Okay, so what’s the solution??

solution

I believe that the solution to any great problem must be simple and clear.

First, I needed to do a deep soul-searching.

1. Q: Front end/back end, or both? A: (OS: The backend can’t be changed because of this situation, it’s unreasonable.) Okay, so modify the front end.
2. Q: How do you change the front-end? Do you implement a component or do some processing on top of the original component? A: (OS: I don’t want to implement another component myself, this one looks good.) Okay, so let’s do some processing.

After deep soul torture, the author decided to try some processing on the original basis to see if the problem can be solved.

After reviewing the official documentation, I found that the change event can be customized in the el-Select tag, as follows:

Looks like we can do something about this. Hey.

Final plan

After careful consideration, the author decided to use the change event in el-SELECT to add a suffix to each element of the array, so that the array can be no duplicate elements.

Considering the uniqueness, complexity and front-end aesthetics of suffixes, and because I have rarely seen key names with parentheses, suffixes are added in the form of parentheses and numbers (e.g. :(1)).

Here, the search function is mainly used to find the suffix. If the suffix does not exist, the suffix is added, and if it exists, the suffix is calibrated. Specific implementation code is as follows (js level is not high, please spray = =) :

// add the suffix
addSuffix(query){
  const isValidQuery = query.constructor === Array && query.length > 0;
  if (isValidQuery){
    query.forEach((item, index) = > {
      const suffixStartIndex = item.search(/ \ [0-9] + \] /);
      const expectedSuffix = '(' + (index + 1).toString() + ') ';
      if (suffixStartIndex === - 1){
        query[index] = item + expectedSuffix;
      }else{
        query[index] = item.substring(0, suffixStartIndex) + expectedSuffix; }})}return query
}
Copy the code

Then add the change event to the el-SELECT tag:

<el-select
    v-model.trim="scope.row.query"
    @change="addSuffix(scope.row.query)"
    multiple/ / multi-selectfilterable 
    default-first-option
    allow-create 
    placeholder="Please enter variable query statement">
</el-select>
Copy the code

Let the giFs do the talking:

That way, unless you enter a key with “number” on it (which I haven’t seen), it’s pretty much harmless.

Clean up a mess

Next, we need to remove the suffix when passing arguments to the back end, using the replace function, as shown in the following example:

    // Delete the suffix
    self.form.setGlobalVars.forEach((setGlobalVar) = > {
      setGlobalVar.query.forEach((query, index) = > {
        setGlobalVar.query[index] = query.replace(/ \ [0-9] + \] /.""); })});Copy the code

But does that end there? We also need to add the suffix to the back-end data for the front-end display, where the addSuffix function encapsulated before is directly used. The code is as follows:

    / / a suffix
    data.setGlobalVars.forEach((setGlobalVar) = > {
      setGlobalVar.query = this.addSuffix(setGlobalVar.query)
    });
Copy the code

At this point. The problem was solved “perfectly”.

It took 2 hours from finding the problem to solving it.

It took a whole day from solving the problem to finishing the article.

Welcome to scan code to pay attention to my public number “intelligent automation testing”, reply: advanced test tutorial, you can get free advanced tutorial ~

- the 2019-5-12Copy the code

Happy New Year to all the great mothers out there! Mom, I love you!