el-tree-transfer自定义节点图标

el-tree-transfer结合el-tree自定义节点图标（文档地址）

效果图

1、el-tree-transfer是结合element-ui开发的，要想使用先下载 element-ui,在下载el-tree-transfer；

npm install element-ui --save
npm install el-tree-transfer --save

el-tree-transfer可以全局引入或局部引入；全局就是在main.js里导入就行了；局部是在需要的文件夹里导入；

import treeTransfer from "el-tree-transfer"; // 引入

2、使用el-tree-transfer实现树形穿梭框，自定义图标

1、html 代码content-left、content-right这两个插槽默认接受一个树节点的对象，通过es6解构语法取出需要的属性（node、data），node是当前节点，data 是当前对象

<tree-transfer
   :title="title"
   :from_data="fromData"
   :to_data="toData"
   :defaultProps="defaultProps"
   :node_key="nodeKey"
   :pid="pid"
   @addBtn="addTree"
   @removeBtn="removeTree"
   height="540px"
   filter
 >
   <template #content-left="{ data }">
     <i class="el-icon-video-camera" v-if="data.leaf"></i>
     <i class="el-icon-folder" v-else></i>
     {{ data.name }}
   </template>
   <!-- <template #content-right="{ node, data }">  node 是节点  data 数据 -->
   <template #content-right="{ data }">
     <i class="el-icon-video-camera" v-if="data.leaf"></i>
     <i class="el-icon-folder" v-else></i>
     {{ data.name }}
   </template>
 </tree-transfer>

2、js代码部分(注意：根节点的parentIndexCode必须是数字0，不然会有问题)

data(){
	return {
	 	title: ["待选择", "已选择"],// 穿梭框左右标题
      	defaultProps: { label: "name", children: 'children' },// 配置选项
      	fromData: [// 源数据
      	{
		  "indexCode": "2b3931fb0beb44239f",
		  "name": "根节点",
		  "flag": "1",
		  "exist": null,
		  "parentIndexCode": 0,
		  "children": [
	       	{
			      "indexCode": "33012700002",
			      "name": "节点1",
			      "flag": "1",
			      "exist": null,
			      "parentIndexCode": "2b3931fb0beb44239f",
			      "children": [
			        {
			          "indexCode": "330127000021",
			          "name": "节点1-1",
			          "flag": "1",
			          "exist": null,
			          "parentIndexCode": "33012700002",
			          "children": [
			            {
			              "indexCode": "3301270000216",
			              "name": "节点1-1-1",
			              "flag": "1",
			              "exist": null,
			              "parentIndexCode": "330127000021",
			              "children": [
			                {
			                  "indexCode": "33012752001320",
			                  "name": "节点1-1-1-1",
			                  "flag": "2",
			                  "exist": "1",
			                  "parentIndexCode": "3301270000216",
			                  "children": null,
			                  "leaf": true
			                },
			                {
			                  "indexCode": "33012752001321",
			                  "name": "节点1-1-1-2",
			                  "flag": "2",
			                  "exist": "1",
			                  "parentIndexCode": "3301270000216",
			                  "children": null,
			                  "leaf": true
			                }
			              ],
			              "leaf": false
			            },
			            {
			              "indexCode": "3301272160219917",
			              "name": "节点1-1-2",
			              "flag": "1",
			              "exist": null,
			              "parentIndexCode": "330127000021",
			              "children": null,
			              "leaf": false
			            },
			            {
			              "indexCode": "3301272160219918",
			              "name": "节点1-1-3",
			              "flag": "1",
			              "exist": null,
			              "parentIndexCode": "330127000021",
			              "children": null,
			              "leaf": false
			            }
			          ],
			          "leaf": false
			        },
			        {
			          "indexCode": "3301272160319990",
			          "name": "节点1-2",
			          "flag": "1",
			          "exist": null,
			          "parentIndexCode": "33012700002",
			          "children": [
			            {
			              "indexCode": "3301272160939933",
			              "name": "节点1-2-1",
			              "flag": "1",
			              "exist": null,
			              "parentIndexCode": "3301272160319990",
			              "children": null,
			              "leaf": false
			            },
			            {
			              "indexCode": "3301272160939934",
			              "name": "节点1-2-2",
			              "flag": "1",
			              "exist": null,
			              "parentIndexCode": "3301272160319990",
			              "children": null,
			              "leaf": false
			            }
			          ],
			          "leaf": false
			        },
			        {
			          "indexCode": "33012712160019990",
			          "name": "节点1-3",
			          "flag": "1",
			          "exist": null,
			          "parentIndexCode": "33012700002",
			          "children": null,
			          "leaf": false
			        },
			        {
			          "indexCode": "3301272160119990",
			          "name": "节点1-4",
			          "flag": "1",
			          "exist": null,
			          "parentIndexCode": "33012700002",
			          "children": null,
			          "leaf": false
			        }
			      ],
			      "leaf": false
			    },{
			      "indexCode": "3301272160019991",
			      "name": "节点2",
			      "flag": "0",
			      "exist": null,
			      "parentIndexCode": "2b3931fb0beb44239f",
			      "leaf": true
			    },{
			      "indexCode": "3301272160019992",
			      "name": "节点3",
			      "flag": "0",
			      "exist": null,
			      "parentIndexCode": "2b3931fb0beb44239f",
			      "leaf": true
			    }
			  ],
			  "leaf": false
			}
      	],
      	toData: [],// 目标数据
      	nodeKey: 'indexCode',// 自定义node-key的值，默认为id
      	pid: 'parentIndexCode',// 自定义pid的参数名，默认为"pid"
	}
},
methods: {
	// 添加
	addTree(fromData, toData, obj) {
   		console.log(fromData, toData, obj);
 	},
 	// 移除
 	removeTree(fromData, toData, obj) {
   		console.log(fromData, toData, obj);
 	},
}