一個基於vue和element-ui的樹形穿梭框及郵件通信錄

時間  2019-11-07
標籤 一個 基於 vue element 穿梭 郵件 通信 简体版
原文   原文鏈接

一個基於vue和element-ui的樹形穿梭框及郵件通信錄。

github原文連接: github.com/hql7/tree-t…vue

1.先下載插件

npm install el-tree-transfer --save
複製代碼

2.vue代碼(部分)

<!-- 使用樹形穿梭框組件 -->
<tree-transfer :from_data='fromData' :title='title' :to_data='toData' 
    :defaultProps="{label:'name'}" :pid='parentId' 
    @addBtn='add' @removeBtn='remove' 
    :mode='mode' height='340px' filter openAll
>
</tree-transfer>
複製代碼
import treeTransfer from 'el-tree-transfer' // 引入
複製代碼
//樹形穿梭框數據
mode: "transfer", // transfer addressList
parentId: 'parentId',
title: ['功能類別','功能權限'],
fromData:[],
toData:[],
複製代碼
//註冊組件
components: {
    treeTransfer
},
複製代碼
/** 方法 start */
    //獲取樹形數據
    getPermissionTree() {
        let param = {
            roleId: '',
            sysId: ''
        }
        permissionTree(param).then(res => {
            if(res.code == 0){
                console.log(res.data)
                this.fromData = res.data.children;
            }else{
                this.$message({
                    message: res.msg,
                    type: 'warning'
                })
            }
        })
    },
   // 切換模式 現有樹形穿梭框模式transfer 和通信錄模式addressList
    changeMode() {
        if (this.mode == "transfer") {
        this.mode = "addressList";
        } else {
        this.mode = "transfer";
        }
    },
    // 監聽穿梭框組件添加
    add(fromData,toData,obj){
        // 樹形穿梭框模式transfer時，返回參數爲左側樹移動後數據、右側樹移動後數據、移動的{keys,nodes,halfKeys,halfNodes}對象
        // 通信錄模式addressList時，返回參數爲右側收件人列表、右側抄送人列表、右側密送人列表
        console.log("fromData:", fromData);
        console.log("toData:", toData);
        console.log("obj:", obj);
        //遞歸遍歷樹形結構
        function getRoleId(obj){
            for(var i in obj){
                //輸出每一個節點id
                console.log(obj[i].id)
                if(obj[i].children){
                    //若是存在子樹,遞歸調用函數
                    getRoleId(obj[i].children)
                }
            }
        }
        getRoleId(toData)
    },
    // 監聽穿梭框組件移除
    remove(fromData,toData,obj){
        // 樹形穿梭框模式transfer時，返回參數爲左側樹移動後數據、右側樹移動後數據、移動的{keys,nodes,halfKeys,halfNodes}對象
        // 通信錄模式addressList時，返回參數爲右側收件人列表、右側抄送人列表、右側密送人列表
        console.log("fromData:", fromData);
        console.log("toData:", toData);
        console.log("obj:", obj);
    }
 /** 方法 end */
複製代碼

3.樹形數據結構

{
	"code":"0",
	"data":{
		"children":[
			{
				"children":[
					{
						"collected":false,
						"createTime":"2019-10-30 23:42:56",
						"desc":"角色管理",
						"icon":"http://192.168.3.20/group1/M00/00/37/wKgDFF2wPiiARsaJAAAu6pZE5A8893.png",
						"id":219,
						"modifyTime":"2019-10-30 23:44:25",
						"name":"角色管理",
						"parentId":1,
						"permission":"role:page",
						"sysId":1
					}
				],
				"collected":false,
				"createTime":"2019-10-15 18:02:01",
				"desc":"用戶管理",
				"icon":"http://192.168.3.20/group1/M00/00/37/wKgDFF2wPiiARsaJAAAu6pZE5A8893.png",
				"id":1,
				"modifyTime":"2019-10-26 01:25:25",
				"name":"用戶管理",
				"parentId":0,
				"permission":"usermanagement:page",
				"sysId":1,
				"url":"/#/usermanagement"
			},
			{
				"collected":false,
				"createTime":"2019-10-18 01:50:16",
				"desc":"發佈節目",
				"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_CeAR8BdAAAbGDTayng433.png",
				"id":6,
				"modifyTime":"2019-10-26 01:25:40",
				"name":"發佈節目",
				"parentId":0,
				"permission":"releaseprogram:page",
				"sysId":1,
				"url":"/#/releaseprogram"
			},
			{
				"children":[
					{
						"collected":false,
						"createTime":"2019-10-18 01:53:24",
						"desc":"學生信息",
						"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_DiAAxZHAAAhYmLGJZw271.png",
						"id":8,
						"modifyTime":"2019-10-26 01:25:46",
						"name":"學生信息",
						"parentId":7,
						"permission":"students:page",
						"sysId":1,
						"url":"/#/customized/students"
					},
					{
						"collected":false,
						"createTime":"2019-10-18 01:53:29",
						"desc":"班級信息",
						"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_EKAfXtGAAAivGUk2Ds368.png",
						"id":9,
						"modifyTime":"2019-10-26 01:26:26",
						"name":"班級信息",
						"parentId":7,
						"permission":"classInfo:page",
						"sysId":1,
						"url":"/#/customized/classInfo"
					},
					{
						"collected":false,
						"createTime":"2019-10-18 01:53:29",
						"desc":"班級榮譽",
						"icon":"http://192.168.3.20/group1/M00/00/39/wKgDFF24FOiAJP01AAAye6tm83g117.png",
						"id":10,
						"modifyTime":"2019-10-30 02:31:05",
						"name":"班級榮譽",
						"parentId":7,
						"permission":"classHonor:page",
						"sysId":1,
						"url":"/#/customized/classHonor"
					},
					{
						"collected":false,
						"createTime":"2019-10-18 01:53:30",
						"desc":"學習標兵",
						"icon":"http://192.168.3.20/group1/M00/00/39/wKgDFF24Ff2AQCRZAAAWXgURDWQ225.png",
						"id":11,
						"modifyTime":"2019-10-30 02:35:43",
						"name":"學習標兵",
						"parentId":7,
						"permission":"modelStudents:page",
						"sysId":1,
						"url":"/#/customized/modelStudents"
					},
					{
						"collected":false,
						"createTime":"2019-10-18 01:56:37",
						"desc":"班級相冊",
						"icon":"http://192.168.3.20/group1/M00/00/39/wKgDFF24FWmAC1-cAAAuJ3YEngw503.png",
						"id":12,
						"modifyTime":"2019-10-30 02:33:14",
						"name":"班級相冊",
						"parentId":7,
						"permission":"classAlbum:page",
						"sysId":1,
						"url":"/#/customized/classAlbum"
					},
					{
						"collected":false,
						"createTime":"2019-10-18 01:56:37",
						"desc":"課程表",
						"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_JuAYESwAAAgKG6WwTo134.png",
						"id":13,
						"modifyTime":"2019-10-26 01:26:39",
						"name":"課程表",
						"parentId":7,
						"permission":"schedule:page",
						"sysId":1,
						"url":"/#/customized/schedule"
					},
					{
						"collected":false,
						"createTime":"2019-10-18 01:56:37",
						"desc":"值日表",
						"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_KKAZr-tAAAfswZJdEk487.png",
						"id":14,
						"modifyTime":"2019-10-26 01:26:41",
						"name":"值日表",
						"parentId":7,
						"permission":"onduty:page",
						"sysId":1,
						"url":"/#/customized/onduty"
					},
					{
						"collected":false,
						"createTime":"2019-10-18 01:56:37",
						"desc":"上課時間",
						"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_LCAYLOlAAAh6FW1LEI710.png",
						"id":15,
						"modifyTime":"2019-10-26 01:26:44",
						"name":"上課時間",
						"parentId":7,
						"permission":"courseTime:page",
						"sysId":1,
						"url":"/#/customized/courseTime"
					},
					{
						"collected":false,
						"createTime":"2019-10-18 01:56:38",
						"desc":"做業",
						"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_LaALlt6AAAgsUrKhcE570.png",
						"id":16,
						"modifyTime":"2019-10-26 01:26:46",
						"name":"做業",
						"parentId":7,
						"permission":"homework:page",
						"sysId":1,
						"url":"/#/customized/homework"
					},
					{
						"collected":false,
						"createTime":"2019-10-18 01:56:38",
						"desc":"公開課",
						"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_L-AE5A5AAAWBx3iYt4230.png",
						"id":17,
						"modifyTime":"2019-10-26 01:26:49",
						"name":"公開課",
						"parentId":7,
						"permission":"openClass:page",
						"sysId":1,
						"url":"/#/customized/openClass"
					},
					{
						"collected":false,
						"createTime":"2019-10-18 01:57:20",
						"desc":"考勤設置",
						"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF24DrWAY1nyAAAcs65FGK0930.png",
						"id":18,
						"modifyTime":"2019-10-30 02:04:39",
						"name":"考勤設置",
						"parentId":7,
						"permission":"attendanceTime:page",
						"sysId":1,
						"url":"/#/customized/attendanceTime"
					},
					{
						"collected":false,
						"createTime":"2019-10-18 01:57:20",
						"desc":"考勤記錄",
						"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_MqAZeQ9AAAic2eGjZA744.png",
						"id":19,
						"modifyTime":"2019-10-26 01:26:52",
						"name":"考勤記錄",
						"parentId":7,
						"permission":"attendance:page",
						"sysId":1,
						"url":"/#/customized/attendance"
					},
					{
						"collected":false,
						"createTime":"2019-10-18 01:57:21",
						"desc":"通知公告",
						"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_M-ADNAhAAAb9mvlM4M088.png",
						"id":20,
						"modifyTime":"2019-10-26 01:26:55",
						"name":"通知公告",
						"parentId":7,
						"permission":"notic:page",
						"sysId":1,
						"url":"/#/customized/notic"
					},
					{
						"collected":false,
						"createTime":"2019-10-18 01:57:21",
						"desc":"社團活動",
						"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_NmAQ7c7AAAic2eGjZA896.png",
						"id":21,
						"modifyTime":"2019-10-26 01:26:58",
						"name":"社團活動",
						"parentId":7,
						"permission":"societies:page",
						"sysId":1,
						"url":"/#/customized/societies"
					},
					{
						"collected":false,
						"createTime":"2019-10-18 01:57:22",
						"desc":"校園動態",
						"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_aeAZZI3AAAVBmFjT3U586.png",
						"id":22,
						"modifyTime":"2019-10-26 01:27:01",
						"name":"校園動態",
						"parentId":7,
						"permission":"schoolNews:page",
						"sysId":1,
						"url":"/#/customized/schoolNews"
					},
					{
						"collected":false,
						"createTime":"2019-10-18 01:57:23",
						"desc":"考試",
						"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF24D1eAb5RLAABLbCUaWPw133.png",
						"id":25,
						"modifyTime":"2019-10-30 02:07:21",
						"name":"考試",
						"parentId":7,
						"permission":"exam:page",
						"sysId":1,
						"url":"/#/customized/exam"
					},
					{
						"collected":false,
						"createTime":"2019-10-18 01:57:24",
						"desc":"食堂",
						"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_ZCAXaCdAAATiS3efmI140.png",
						"id":26,
						"modifyTime":"2019-10-26 01:27:06",
						"name":"食堂",
						"parentId":7,
						"permission":"canteen:page",
						"sysId":1,
						"url":"/#/customized/canteen"
					},
					{
						"collected":false,
						"createTime":"2019-10-18 01:57:25",
						"desc":"充值、激活",
						"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF24EW-ALGJLAAA2lelzJ30355.png",
						"id":27,
						"modifyTime":"2019-10-30 02:17:16",
						"name":"充值、激活",
						"parentId":7,
						"permission":"cards:page",
						"sysId":1,
						"url":"/#/customized/cards"
					},
					{
						"collected":false,
						"createTime":"2019-10-18 01:57:25",
						"desc":"IP電話套餐",
						"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF24EdmAQdeqAAAqa7yajNo327.png",
						"id":28,
						"modifyTime":"2019-10-30 02:18:03",
						"name":"IP電話套餐",
						"parentId":7,
						"permission":"ipPackage:page",
						"sysId":1,
						"url":"/#/customized/ipPackage"
					},
					{
						"collected":false,
						"createTime":"2019-10-18 01:57:26",
						"desc":"通話記錄",
						"icon":"http://192.168.3.20/group1/M00/00/39/wKgDFF24EpOAJFY9AAB8cX3kVRo457.png",
						"id":29,
						"modifyTime":"2019-10-30 02:21:08",
						"name":"通話記錄",
						"parentId":7,
						"permission":"callRecords:page",
						"sysId":1,
						"url":"/#/customized/callRecords"
					},
					{
						"collected":false,
						"createTime":"2019-10-18 01:57:42",
						"desc":"帳單查詢",
						"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF24EhGAYfzXAAC5S89Wkbk580.png",
						"id":30,
						"modifyTime":"2019-10-30 02:18:59",
						"name":"帳單查詢",
						"parentId":7,
						"permission":"cardBill:page",
						"sysId":1,
						"url":"/#/customized/cardBill"
					}
				],
				"collected":false,
				"createTime":"2019-10-18 01:52:30",
				"desc":"定製化頁面",
				"icon":"http://192.168.3.20/group1/M00/00/38/wKgDFF2w_DCAMXJ8AAAcs65FGK0459.png",
				"id":7,
				"modifyTime":"2019-10-26 01:25:43",
				"name":"定製化頁面",
				"parentId":0,
				"permission":"customized:page",
				"sysId":1,
				"url":"/#/"
			},
		
		],
		"collected":false,
		"id":0
	},
	"msg":"操做成功"
}
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程