preface

Backend yesterday told me that need to add an edit function, the interface is already written, and then let me add an edit popup window, I think it is not very simple things, and then quickly write the popup window, the edit data also shows: by the way, and then show the cascade data selector, met for me to have a big problem, a word

The echo to realize

The first way

Echo directly through data binding

<el-cascader
                    v-model="queryParamse.field"// Data returned by the back end
                    :props="props"
                    ref="tree"
                    @change="handleSelect"
                    :show-all-levels="false"
                    :clearable="true"
                   
                  ></el-cascader>
Copy the code

The command output fails… , the backend returned the last item ID, the first, the second item ID is not, then I also thought about it, feel through the third level of options to get the first and second level of options, should it be so troublesome?

When I saw only the third level ID, I planned to discuss with the backend. Under my plea, the backend finally agreed to add a field to me, put the first, second and third level iD, and then gave me an array (PS: feel humble ~~~~).

For field

By taking the array given by the back end, make changes to your own code and echo back

<el-form-item label="Area">
                  <el-cascader
                    v-model="titmre"// Bind the echo array:props="props"
                    ref="tree"
                    @change="handleSelect"
                    :show-all-levels="false"
                    :clearable="true"
                   
                  ></el-cascader>
                  
   // Retrieve the display data
    titmre: [], 
    this.titmre = response.data.results[this.editId].children; //editId is the index value
    // Empty the array when clicking Submit and cancel
    this.titmre = []
Copy the code

Echo success

Encounter a bug

I thought this was the end, but suddenly I found a problem, that is, when I click the first data, it will display, but when I click the second data, it will display failure, but I can get the data, as follows:

When I opened the selection box, I found that the option of the first data was still there, so although I got the second data, I could not display it

Check the documentation and use the clearCheckedNodes() method to clear the options. Using the failure

Baidu tried many methods for a long time, and then simply gave up using official methods

To solve

Since only the first click of the popover after entering the page can display correctly, is it equivalent to reloading the edit popover? Therefore, you can clear the options by destroying the popover, and then re-rendering a new popover when clicking again

 <el-dialog
     v-if="dialogFormVisible"
        style="margin-left: 8rem"
        width="90%"
        title="Modify data"
        :visible.sync="dialogFormVisible"
      >
Copy the code

Directly destroy the entire popover, to achieve the function

The second way

The most simple method, when I think of the second method, I directly doubt that I drank fake wine yesterday, because of this function from yesterday to now… (The point is, I didn’t drink yesterday ~~~~ and just gave up thinking…)

To achieve the following

If the back end is better and does not only return the id of the third level, but also returns the name of the third level, this can be done by using the following method

  1. Add this code to the cascade selector
placeholder="Please select"
Copy the code

2. Register a string

pleasett:""
Copy the code

3. Assign a value such as the option name returned by the backend with the third level

Do the assignment directly

 this.pleasett = res.data.field.name;
Copy the code

Placeholder =” select “; placeholder=” select “; placeholder=” select”

<el-cascader
                     v-model="titmre"
                    :props="props"
                    @change="handleSelect"
                    :show-all-levels="false"
                    :clearable="true"
                     :placeholder="pleasett"
                  ></el-cascader>
Copy the code

5. Add a style to the placeholder, change the light gray to light black

.el-input__inner::placeholder{
  color:rgba(0.0.0.0.685) !important;
}
Copy the code

The end of the

The above is editing, the echo of the cascade selector to achieve ~~~~, finally, I hope you brothers and sisters pay attention to the body, come on!