Renderings:
This is a modified pop-up window. The function we want to achieve is to bring the data into the pop-up window when clicking the modify button in the list, and close the pop-up window when clicking Save.
1. Click Modify to expand the pop-up window
Using the eldialog component, when the value bound by v-model is true, the pop-up window will open. I put the component written by myself in the component for data display. Here we will be able to write a function and bind it to the modify button. Above, this function is used to process the dialogtablevisible variable. First, the initial value of this variable is flase. When the modify button is clicked, modify the variable to true to realize the opening function.
2. Click the Cancel close button
Here we need to use the emit method. Through the subcomponents in el-dialo, click to pass the value. We will execute a new function in the parent component with the passed value. This function is to modify the dialogtablevisible variable to flase, so that the click is realized . Close the popup when canceling,
Subassembly:
parent component:
3. Pass the data of the list page into the subcomponent as the initial value of editing
Parent component pass:
Subcomponents receive and render:
It should be noted here that we need to use watch to monitor the props data. When the data is updated every time, we should monitor the update in the watch and reassign the value. Otherwise, when we click on the second list data, the data will be incorrect.
over, sprinkle flowers