1\Install and use el-tree-transfer – npm
npm install el-tree-transfer --save //or npm i el-tree-transfer -S
2. Write component treeTransfer.vue
<template>
<div>
// other code
...
// Use the tree shuttle box component
<tree-transfer
:title="title" //title type: Array required: false default: ["source list", "target list"]
:from_data='fromData' //Source data type: Array Required: true Supplement: The data format is the same as the element-ui tree component, but must have id and pid
:to_data='toData' //Target data type: Array Required: true Supplement: The data format is the same as element-ui tree component, but must have id and pid
:defaultProps="{label:'label'}" //Configuration item - same as props in el-tree Mandatory: false Supplement: Usage is the same as props in el-tree
@addBtn='add' //The event callback parameter triggered when the add button is clicked: function(fromData,toData,obj), the transfer mode of the tree shuttle box is 1. left data after moving, 2. right after moving Side data, 3. Moved node keys, nodes, halfKeys, halfNodes objects; in the address list addressList mode, the return parameters are the recipient list on the right, the CC list on the right, and the BCC list on the right
@removeBtn='remove' //Event callback triggered when the remove button is clicked Parameters: function(fromData,toData,obj), the transfer mode of the tree shuttle box is 1. left data after moving, 2. after moving Data on the right side, 3. Moved node keys, nodes, halfKeys, halfNodes objects; in the address list addressList mode, the return parameters are the recipient list on the right, the CC list on the right, and the Bcc list on the right
:mode='mode' //Set the mode, the optional value of the field is transfer|addressList Type: String Required: false Supplement: mode defaults to transfer mode, that is, the tree shuttle box mode, and the configurable field is changed to addressList In address book mode, the button cannot customize the name in address book mode. If you want to customize the title name, you can pass in four values in the title array. In addressList mode, the title defaults to address book, recipient, cc, and bcc people
height='400px' //height type: String required: false default: 320px
filter //Whether to enable the filtering function Type: Boolean Required: false
openAll> //Whether to expand all by default Type: Boolean Required: false
</tree-transfer>
</div>
</template>
<script>
import treeTransfer from 'el-tree-transfer' // import
export defult {
data(){
return: {
title: ["To be selected","Selected"], //Title Type: Array Required: false Default: ["Source List", "Target List"]
mode: "transfer", //Set the mode, the optional value of the field is transfer|addressList Type: String Required: false Supplement: the mode defaults to transfer mode, that is, the tree shuttle box mode, and the configurable field is changed to addressList In address book mode, the button cannot customize the name in address book mode. If you want to customize the title name, you can pass in four values in the title array. In addressList mode, the title defaults to address book, recipient, cc, and bcc people
fromData:[ //Source data type: Array Required: true Supplement: The data format is the same as the element-ui tree component, but must have id and pid
{
id: "1",
pid: 0, //Customize the parameter name of pid, the default is "pid" Mandatory: false
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: "Secondary 1-2-1"
},
{
id: "1-2-2",
pid: "1-2",
children: [],
label: "Secondary 1-2-2"
}
]
}
]
},
],
toData:[] //Target data type: Array Required: true Supplement: The data format is the same as element-ui tree component, but must have id and pid
}
},
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";
}
},
// Monitor the addition of the shuttle box component
add(fromData,toData,obj){
// When transferring in the tree shuttle box mode, the return parameters are the data after the left tree is moved, the data after the right tree is moved, and the moved {keys, nodes, halfKeys, halfNodes} object
// In the address book mode addressList, the return parameters are the recipient list on the right, the cc list on the right, and the bcc list on the right
console.log("fromData:", fromData);
console.log("toData:", toData);
console.log("obj:", obj);
},
// Monitor the removal of the shuttle box component
remove(fromData,toData,obj){
// When transferring in the tree shuttle box mode, the return parameters are the data after the left tree is moved, the data after the right tree is moved, and the moved {keys, nodes, halfKeys, halfNodes} object
// In the address book mode addressList, the return parameters are the recipient list on the right, the cc list on the right, and the bcc list on the right
console.log("fromData:", fromData);
console.log("toData:", toData);
console.log("obj:", obj);
}
},
components:{ treeTransfer } // register
}
</script>
Explanation: Return strictly according to the data structure of the sample, and there will be no error. Note that there must be a pid, and the pid corresponds to the parent id. but. . . Here comes the important point, what is returned from the backend does not necessarily follow the example. You let the backend follow this, but if someone insists, then we can only do it ourselves at the frontend.
2. Bugs and pitfalls
defaultProps: Modify the corresponding name of the parameter such as { label: “name”, children: “child” }
The pid involves a lot of content to be changed. The tree structure is lost after stepping on the pit data from the left to the right, or adding a piece of data inexplicably. After searching for a long time, I found that there is no pid in the fromData returned to me by the background. It is the parentId, so if the pid cannot be resolved in the source code, it will not be converted into a tree for you! And the location is wrong, still wrong.
Adjust vue:
<tree-transfer
:title="title"
:from_data="fromData"
:to_data="toData"
:pid="parent_id"
:defaultProps="{ label: 'name' }"
@addBtn="add"
@removeBtn="remove"
:mode="mode"
height="400px"
filter
openAll
>
</tree-transfer>
Description: Add: :pid=”parent_id”
Add props:
export default {
props: {
// el-tree node-key must be unique
node_key: {
type: String,
default: "id"
},
// Customize the pid parameter name, because the parameter name given by the backend is parentId
pid: {
type: String,
default: "parent_id"
},
},
}
data definition:
parent_id: 'parent_id', /*shuttle frame*/ title: ["Member Group", "Selected Member Group"], mode: "transfer", data: [],
Data processing obtained by the interface:
this.fromData = res.data.list
this.fromData.forEach(item => { //The first pid of the el-tree-transfer component must be 0
item.parent_id = 0
})
It is not processed by the above method, and the data cannot be obtained after turning to the right.