1.數據庫表設計

• 生成樹結構的主要列是id列和parent_id列，后者指向他的父級
  

2.來到前端代碼生成器頁面

• 導入你剛剛寫出該格式的數據庫表
  

3.點擊編輯，來到字段

• 祖籍列表是為了好找到直接父類，不屬于代碼生成器方法，需要后臺編寫
  

4.改變生成結構為樹表結構

5.提交然后生成代碼并復制到對應目錄當中

6.修改serviceImpl當中插入和修改方法

    /*** 新增原料** @param tIngredient 原料* @return 結果*/@Overridepublic int insertTIngredient(TIngredient tIngredient) {TIngredient info = tIngredientMapper.selectTIngredientById(tIngredient.getParentId());// 如果父節點不為正常狀態,則不允許新增子節點if (!UserConstants.DEPT_NORMAL.equals(info.getStatus())) {throw new ServiceException("原料類型停用，不允許新增");}tIngredient.setAncestors(info.getAncestors() + "," + tIngredient.getParentId());tIngredient.setCreateTime(DateUtils.getNowDate());return tIngredientMapper.insertTIngredient(tIngredient);}/*** 修改原料** @param tIngredient 原料* @return 結果*/@Overridepublic int updateTIngredient(TIngredient tIngredient) {TIngredient newParentDept = tIngredientMapper.selectTIngredientById(tIngredient.getParentId());TIngredient oldDept = tIngredientMapper.selectTIngredientById(tIngredient.getId());if (StringUtils.isNotNull(newParentDept) && StringUtils.isNotNull(oldDept)) {String newAncestors = newParentDept.getAncestors() + "," + newParentDept.getId();String oldAncestors = oldDept.getAncestors();tIngredient.setAncestors(newAncestors);updateDeptChildren(tIngredient.getId(), newAncestors, oldAncestors);}tIngredient.setUpdateTime(DateUtils.getNowDate());int result = tIngredientMapper.updateTIngredient(tIngredient);if (UserConstants.DEPT_NORMAL.equals(tIngredient.getStatus()) && StringUtils.isNotEmpty(tIngredient.getAncestors())&& !StringUtils.equals("0", tIngredient.getAncestors())) {// 如果該部門是啟用狀態，則啟用該部門的所有上級部門updateParentDeptStatusNormal(tIngredient);}return result;}

• 用到了兩個額外對數操作方法，聯動子父級菜單的修改

    /*** 修改該部門的父級部門狀態** @param tIngredient 當前部門*/private void updateParentDeptStatusNormal(TIngredient tIngredient) {String ancestors = tIngredient.getAncestors();Long[] deptIds = Convert.toLongArray(ancestors);tIngredientMapper.enableTIngredientByIds(deptIds);}/*** 修改子元素關系** @param deptId       被修改的部門ID* @param newAncestors 新的父ID集合* @param oldAncestors 舊的父ID集合*/public void updateDeptChildren(Long deptId, String newAncestors, String oldAncestors) {List<TIngredient> children = tIngredientMapper.selectChildrenTIngredientById(deptId);for (TIngredient child : children) {child.setAncestors(child.getAncestors().replaceFirst(oldAncestors, newAncestors));}if (children.size() > 0) {tIngredientMapper.updateTIngredientChildren(children);}}

生成完畢，額外處理自己表中數據也是在新增或者修改當中寫

來到想要使用的前端頁面（其他頁面使用）

1.導入依賴

• 第一個依賴是生成樹的請求
• 第二個組件是vue.js的樹形選擇組件
• 第三個是樹形組件的css樣式

import { listIngredient } from "@/api/bases/ingredient";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

2.注冊樹形組件

  components: {Treeselect},

3.要使用的核心方法

    /** 查詢原料下拉樹結構 */getTreeselect () {listIngredient().then(response => {this.ingredientOptions = [];const data = { id: 0, ingredientName: '頂級節點', children: [] };data.children = this.handleTree(response.data, "id", "parentId");this.ingredientOptions.push(data);});},/** 轉換原料數據結構 */normalizer (node) {if (node.children && !node.children.length) {delete node.children;}return {id: node.id,label: node.ingredientName,children: node.children};},

4調用方法，我是通過新增按鈕來實現的

    /** 新增原料操作 */handleAddIngredientVO () {this.reset();this.getTreeselect();this.openAddIngredientVO = true;this.titleAddIngredientVO = "添加產品原料";},

5.調用方法的下拉框表單

            <!-- 新增或者修改原料 --><el-dialog:title="titleAddIngredientVO":visible.sync="openAddIngredientVO"width="500px"append-to-body><el-formref="formVO":model="formVO":rules="rules"label-width="80px"><el-form-itemlabel="產品編碼"prop="breedId"><el-inputv-model="formVO.breedId"placeholder="請輸入產品編碼"/></el-form-item><el-form-itemlabel="父級"prop="materialId"><treeselectv-model="formVO.materialId":options="ingredientOptions":normalizer="normalizer":disable-branch-nodes="true"placeholder="請選擇原料"/></el-form-item><el-form-itemlabel="kg/每米"prop="remark"><el-inputv-model="formVO.remark"placeholder="請輸入每米多少千克"/></el-form-item></el-form><divslot="footer"class="dialog-footer"><el-buttontype="primary"@click="submitForm">確 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog>

• **重點**
  

6.附treeselect組件常用屬性

<treeselect:multiple="true"v-model="form.postIds"//多選id值可賦值可傳給后臺:options="postOptions"//下拉樹樁多選框的數據:show-count="true"//展示下拉總數數據:flat="true"//設置平面模式（選中的標簽不聯動子節點和父節點）:limit="5"//展示多選的標簽個數:limitText="count => `及其它${count}項`"//多選的超出文字展示方式:auto-deselect-descendants="true"//取消節點時，取消其接點的子節點（僅可在平面模式下使用）:auto-select-descendants="true"//選擇節點時，取消其接點的子節點（僅可在平面模式下使用）placeholder="請選擇區域":disable-branch-nodes="true"//只能選擇末級節點/>