Today xiaobian received an optimization, need to select the data for default backfill, hereby note as a summary:

Create a parent/child independent tree

To get this requirement, use the official generic el-tree and call back its icon method based on its type, using the slot rendering el-Checkbox!

Check the defaults

The selected data is passed on the parent component and processed after it is received in the child component. The most important logic is v-model, which sets the ID of the selected data to true to mark the data.

Here on the blackboard!! To process duplicate data, refer to loadash or reduce. For details, see ~

Click the checkbox event

That’s about it. Here’s how to correct the potholes:

Re-render data after closing the popbox;

  • By doing the redrawing and rendering of the dialoag by V-IF, the data is checked.
  • Define the refs of the children on the parent, directly to this.$refs. Reset method;
  • / / destroy-on-close=”true”; / / close=”true”;

Data passed by prop cannot be modified

  • You can change this by setting get and set methods in computed

How to regulate some nodes that cannot be selected

  • The first thing that comes to mind is the effect of using $nextTick delay, or render-after-expand, which results in my V-if

Cause, “cried and searched for a long time.”

Later have time to sort out the problems encountered, help recall!