Vue-treeselect is a multi-selection component with support for nested options for vue.js.

The official website explains the use of very clear, no more than installation > introduction > registered components > use components, and there are HTML and JS two parts can refer to. Here I do not quite understand the function points used in my previous work. I will check the records of Epiphany in the background.

1.options

Options: This function mainly transmits array data, and only receives id, Label, and children attributes, which means that the received data is tree data containing these three attributes. If you get list data like me, you need to convert it first.

Required structure:

{
  id: '<id>'.label: '<label>'.children: [{id: '<child id>'.label: '<child label>',},... ] ,}Copy the code

Solutions:

The converted data structure is correct, but we usually get different property names from the official website, so normalizer function is provided for the conversion.

2. The unknown solution

If unknown is displayed in the box, it is likely that the value of the V-model binding is null, and an error is reported. In this case, set the binding value to NULL. But if another problem is that the request is still null when sent, or the value is null when fetched, try the following.