In a vue project, how to use the el-tree tag in element ui to click the button to generate multiple new folders and subfolders in succession?

the project is developed with vue+element. Now there is such a requirement: the following figure is the interface that requires development. When you click "New Directory" in "manage Directory level", you can create a new directory on the left below (the requirement requires N new directories), and then select the new directory, you can create N new subdirectories, and under the subdirectory you can create N new subdirectories, which can go on indefinitely. Double-click the new directory to change the name of the directory, and each directory and subdirectory can add reply content; The following search requires the corresponding folder of real-time Filter. Now I don"t know how to generate new directories and subdirectories without restriction (figure 2 is the requirement prototype). If you use el-tree tags to generate them, how do you add folder icons (figure 2 has an example) to the tags? Please advise or recommend a plug-in, thank you!


the data you need to bind is like this

data: [{
          label: ' 1',
          children: [{
            label: ' 1-1',
            children: [{
              label: ' 1-1-1'
            }]
          }]
        }, {
          label: ' 2',
          children: [{
            label: ' 2-1',
            children: [{
              label: ' 2-1-1'
            }]
          }, {
            label: ' 2-2',
            children: [{
              label: ' 2-2-1'
            }]
          }]
        }, {
          label: ' 3',
          children: [{
            label: ' 3-1',
            children: [{
              label: ' 3-1-1'
            }]
          }, {
            label: ' 3-2',
            children: [{
              label: ' 3-2-1'
            }]
          }]
        }],

at which level you want to add a new subdirectory, then the children in the corresponding object goes to push an object, and so on, you can create new folders and subdirectories indefinitely.


the control ztree of jq can be used to solve the above problems. For more information, please refer to ztree's official website: http://www.treejs.cn/v3/demo.

.
Menu