需求:項目中需要一個產品目錄樹形圖,點擊樹形節點時,會把當前選中節點的所有父級節點信息帶到左側的搜索框中
解決方法:使用node-click事件函數
// 點擊節點 nodeClick(e) { const { tree } = this.$refs; // 選中節點的所有父級id和codeItem信息 this.parentList = {}; this.searchData = {}; this.getTreeNode(tree.getNode(e.id)); }, getTreeNode(node) { if (node) { if (node.label !== undefined) { // this.parentList所有父級節點的codeItem信息 Object.assign(this.parentList, node.data.codeItem); this.getTreeNode(node.parent); } else { // this.searchData是右側搜索條件對象 this.searchData = JSON.parse(JSON.stringify(this.parentList)); this.getTableData('init'); // 根據查詢條件獲取表格數據 } } },
補充:還有需求是在刪除過濾條件的時候所有節點自動收起來和節點文字過長...展示,鼠標懸浮提示全部文字,代碼如下:
1.刪除過濾條件的時候所有節點自動收起來:
2.節點文字過長...展示,鼠標懸浮提示全部文字