原創,轉載請附加轉載來源.
Element UI 的Cascader是很好的層級控件,https://element.eleme.cn/#/zh-CN/component/cascader
很多時候當我們只知道最后一個節點值,然后需要根據子節點一步一步獲取完整的父節點的值,
直接代碼吧:

/**
 * Created by kun on 2020/7/17
 * @param {object} cascader - element ui cascader options
 * @param {number} id - last child node value
 * @returns {Array} - full value for cascader show
 * 
 */
export function getCascaderFullValue(cascader, id) {
  let cascaderFullValue = [id];
  _getParentId(cascaderFullValue, cascader,cascader, id);

  return cascaderFullValue;

  /**
   * 
   * @param {Array} cascaderFullValue value for return
   * @param {Array} cascader value for loop
   * @param {Array} _cascader value of original
   * @param {number} _id  value of bottom item
   */
  function _getParentId(cascaderFullValue, cascader, _cascader, _id) {
    if (!Array.isArray(cascader)) return;
    
    for (let cascaderItem of cascader) {
      if (!Array.isArray(cascaderItem.children)) continue;

      let index = cascaderItem.children.findIndex(item => item.value === _id);
      if (index >= 0) {
        cascaderFullValue.unshift(cascaderItem.value);

        if(_cascader.findIndex(item => item.value === cascaderItem.value) < 0) //is original item
          _getParentId(cascaderFullValue, _cascader, _cascader,cascaderItem.value);
      } else {
        _getParentId(cascaderFullValue, cascaderItem.children, _cascader,_id);
      }
    }
  }
}

測試數據源json:

  {
"data":[
        {
            "value":7,
            "label":"初級會計師22",
            "children":[
                {
                    "value":11,
                    "label":"初級會計實務",
                    "children":[
                        {
                            "value":13,
                            "label":"初級會計實務試卷模塊",
                            "children":null
                        }
                    ]
                }
            ]
        },
        {
            "value":6,
            "label":"審計師",
            "children":[
                {
                    "value":12,
                    "label":"審計與考核",
                    "children":[
                        {
                            "value":14,
                            "label":"審計與考核模塊！！",
                            "children":null
                        }
                    ]
                },
                {
                    "value":10,
                    "label":"審計理論",
                    "children":[
                         {
                            "value":15,
                            "label":"審計模塊！222！",
                            "children":null
                        }
                    ]
                }
            ]
        }
    ]
}

假設已知后臺拿到最后節點值為14,調用

      console.log(this.cascader); //json 數據源
      const result = getCascaderFullValue(this.cascader,14);
      console.log(result);//[6, 12, 14]

效果圖:

image.png