This article is to introduce a VUE+ElementUI to achieve the left of the tree structure, the right of no hierarchical structure of the shuttle frame function.

Implementation effect

Environmental requirements

The vuE2, Element-UI framework has been installed on the project

On the left is the unselected list, using the components of the El-Tree tree structure, showing a two-level list, and on the right is the unhierarchical list of UL > Li. When we select the data on the left, we add the parent sequence id (parentIndex) to the selected object and push it to the right array keyArr. When we delete the data on the right, we return to the left array according to parentIndex and remove the item in the right array.

The implementation code

<template> <div> <el-form :model="form" ref="form" label-width="80px" :inline="false"> <el-form-item label-width="20px"> <div class="transfer-wrap"> <div class="left-box"> <div class="transfer-wrap"> <div class="left-box"> <div class="transfer-wrap"> class="filter-tree" node-key="id" :data="treeList" :props="defaultProps" ref="tree"></el-tree> </div> <div class="center-icon"><i class="el-icon-arrow-right"></i>&emsp; <i class="el-icon-arrow-left"></i>&emsp; <div class="right-box"> <div class="right-wrap"> <ul> <li v-for="(item, index) in keyarr" :key="index"> <div class="inli"> <span>{{ item.label }}</span> <i class="el-icon-close" @click="removeData(index, item)"></i> </div> </li> </ul> </div> </div> </div> </el-form-item> </el-form> </div> </template> <script> export Default {data() {return {form: {name: "}, treeList: [{id: 1, label: '1', children: [{index: 1, label:' 1'] }, {index: 2, label: 'level-1'}, {index: 3, label: 'level-1'}]}, {id: 2, label: 'level-1'}, {id: 2, label: 'level-1'}]}, {id: 2, label: 'level-1 ', children: [{index: 4, label: 'secondary 2-1}, {index: 5, label:' secondary 2-2}]}, {id: 3, label: 'level 3' children: [{index: }, {index: 7, label: 'props'}]}], keyarr: [], // Array defaultProps: {children: props, props, props, props, props, props, props, props, props, props, props, props, props, props, props, props, props 'children', label: 'label' } } }, methods: {// choose chooseNode(obj, node) {console.log(obj, node); node) if (obj.index) { const indexObj = {} console.log(node.parent.parent, '99') indexObj.parentIndex = node.parent.parent.data.findIndex(d => d.id === node.parent.data.id) const selfIndex = node.parent.data.children.findIndex(d => d.index === obj.index) let newObj = Object.assign(obj, indexObj) console.log('newObj', newObj) let chooseIndex = this.keyarr.findIndex(i => i.index === newObj.index) if (chooseIndex <= -1) { This. Keyarr. Push (newObj) node. Parent. Data. Children. The splice (selfIndex, 1)}}}, remove removeData / / right (index, data) { console.log(index, data) if (data.parentIndex >= 0 && this.treeList[data.parentIndex] && this.treeList[data.parentIndex].children) { this.keyarr.splice(index, 1) let chooseIndex = this.keyarr.findIndex(i => i.index === data.index) if (chooseIndex <= -1) { this.treeList[data.parentIndex].children.push(data) } } } } } </script> <style scoped> .transfer-wrap { display: flex; } .center-icon { display: flex; flex-direction: column; justify-content: center; margin-left: 7px; margin-right: 7px; } .el-tree { width: 176px; height: 232px; border-radius: 2px; Border: 1px solid rgba(0, 0, 0, 0.15); overflow: auto; } i { padding: 6px; margin-top: 4px; background-color: #f4f4f4; border: 1px solid #d1d1d1; box-sizing: border-box; } .right-wrap { width: 176px; height: 232px; border-radius: 2px; Border: 1px solid rgba(0, 0, 0, 0.15); overflow: auto; } li { list-style: none; } </style>Copy the code