How to realize Tree Shuttle frame based on Vue

This article mainly introduces the relevant knowledge of how to achieve the tree shuttle frame based on Vue, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will have something to gain after reading this article on how to achieve the tree shuttle frame based on Vue. Let's take a look.

Tree shuttle box plug-in

El-tree-transfer

This plug-in is a good implementation of the vue project tree shuttle box function.

Installation link

The connection above is the address of the npm plug-in, and the installation steps are simple.

Npm install el-tree-transfer-save

Or

Npm I el-tree-transfer-S

Then just use the shuttle box like a normal component where you need it.

/ / your code. / / use the tree shuttle box component import treeTransfer from 'el-tree-transfer' / / introduce export defult {data () {return: {mode: "transfer" / / transfer addressList fromData: [{id: "1", pid: 0, label: "level 1", children: [{id: "1-1", pid: "1" Label: "level 1-1", disabled: true, children: []}, {id: "1-2", pid: "1", label: "level 1-2" Children: [{id: "1-2-1", pid: "1-2", children: [], label: "level 1-2-1"} {id: "1-2-2", pid: "1-2", children: [] Label: "level 1-2-2"}]}]},], toData: []}} Methods: {/ / switch mode existing tree shuttle box mode transfer and address book mode addressList changeMode () {if (this.mode = = "transfer") {this.mode = "addressList" } else {this.mode = "transfer" }}, / / when add (fromData,toData,obj) {/ / tree shuttle box mode transfer is added to the shuttle box component, the return parameters are left tree moved data, right tree moved data, mobile {keys,nodes,halfKeys,halfNodes} object / / address book mode addressList The return parameters are right recipient list, right CC list, and right BCC list console.log ("fromData:", fromData) Console.log ("toData:", toData); console.log ("obj:", obj) }, / / when the listening shuttle box component removes remove (fromData,toData,obj) {/ / tree shuttle box mode transfer, the return parameters are left tree moved data, right tree moved data, mobile {keys,nodes,halfKeys,halfNodes} object / / address book mode addressList The return parameters are right recipient list, right CC list, and right BCC list console.log ("fromData:", fromData) Console.log ("toData:", toData); console.log ("obj:", obj);}}, components: {treeTransfer} / / Registration}.

Effect display

This is the end of the article on "how to realize the Tree Shuttle Box based on Vue". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to achieve tree shuttle frame based on Vue". If you want to learn more knowledge, you are welcome to follow the industry information channel.