element自身是有乙個transfer穿梭框元件的，這個元件是穿梭框結合checkbox核取方塊來實現的，功能比較單一，自己想實現這個功能也是很簡單的，只是在專案開發中，專案排期緊，沒有閒功夫來實現罷了，但這個元件只適合用來實現較為簡單的左右資料新增刪除的效果，複雜一點的樹結構穿梭框就難實現多了，當然也有造好的輪子等你使用，這裡推薦乙個比較好用的穿梭樹元件el-tree-transfer。
這個el-tree-transfer輪子好是好，但還是沒有達到我的需求，確切的說是沒有達到我們公司產品的需求，我們公司產品的需求在這裡vue+element-ui之tree樹形控制項有關子節點和父節點之間的各種選中關係詳解，尬笑臉... 其實之前實現我們產品的需求時我心裡就已經一萬個草泥馬呼嘯而過了，現在又要在這個基礎上新增乙個穿梭框的效果，阿西吧，我除了苦笑還能幹啥？前端的同行們，我們遇到這樣奇葩的需求，除了苦笑還能幹啥？什麼？你說懟回去？有用嗎？懟回去的後果是除了別人說你愛牢騷情商低，你還能得到啥？什麼？你說尥蹶子？你老婆答應了嗎？你小孩答應了嗎？你的房貸車貸答應了嗎？消停地自己哭吧！這就是餘歡水式的中年危機！！！
嘰嘰歪歪了這許多，還是趕緊看看如何實現吧，其實說白了就是把穿梭框左邊樹元件選中的資料複製乙份給右邊的樹元件，這樣在vue「資料驅動檢視」的牛逼格拉斯思想下，右邊樹元件就會完美顯示左邊勾選的資料，然後再把左邊已選中的資料給刪除了就行了。說幹就幹，來啊，造作啊，反正有大把時光。
//往右側新增資料的按鈕
addright(),
//設定右側樹-遞迴迴圈左側資料並賦值給乙個空陣列而後返回該陣列
setrightdata(tree = , keys = );
if(i == item.id)
});})
}return arr;
},//刪除選中的節點-如節點有子節點未被選中則該節點不被刪除
leftdel(tree = , keys = )
}});})}
},
那麼這個問題是不是就進入了死胡同實現不了你呢？當然不是，在看了el-tree-transfer這個輪子的原理後，如醍醐灌頂，是恍然大悟。其實一開始能想到我文中之前的那種實現方法也是很不錯的，至少自己思考了，公尺蘭.昆德拉說「人類一思考，上帝就發笑。」 這當然是句玩笑，思想很重要。
}
}}
}
} }
本文參考：
element自定義表單驗證
validate.js param path returns export function i ternal path 手機號碼 param s export function checkphone rule,value,callback if value if number.isinteger ...
element自定義驗證規則
需求1 獲取到某個輸入框內容並判斷是否符合規則要求 以 號為例 dataforget.captcha placeholder 請輸入手機或郵箱驗證碼 prefix icon el icon edit el input let isphone 00 86 1 3 d 4 5 7 9 5 0 3 5 9...
element 表單自定義校驗
element 表單自定義校驗備份 涉及開始時間，結束時間，時間間隔 rules rules enddate maintaininterval maintaingrade 對應的規則說明 在data 中return上面宣告對應的規則 const enddaterules rule,value,cal...