常見前端三級選單授權邏輯講解（element-ui）

hello你好我是辰兮很高興你來閱讀，最近遇到太多關於三級選單的邏輯以及做判斷時候遇到的問題，剛好抽點時間整理一下相關的知識點！分享獲取新知，大家一起進步！

---

一、應用場景

關於本篇多少三級選單業務的講解

關於多級選單更多是在管理員的頁面進行的相關操作，常見的包括授權等！比如一級許可權，二級許可權，三級許可權！

其他的應用場景 比如省/市/區 等等 組織/區域/特定位置 等等

關於選單的相關元件 參考bootstrap /element-ui 等前端參考案例

這部分後臺的邏輯複雜一點，前端大家直接呼叫看懂函式即可，下面來簡單的和大家分享一下多級選單的相關邏輯實現！

---

二、邏輯分析

關於授權的邏輯建議大家從下往上分析！

首先點選三級選單的時候

邏輯1：如果二級選單未勾選，我們要實現勾選

邏輯2：此時要判斷，如果一級選單未勾選，我們要實現勾選

當我們點選二級選單的時候

邏輯1：我們要實現三級選單的全部勾選

邏輯2：此時要判斷，如果一級選單未勾選，我們要實現勾選

當我們點選一級選單的時候

邏輯1：我們要實現二級選單的全部勾選

邏輯2：同時實現二級選單的子選單的全部勾選

---

取消勾選

當我們點選三級選單全部取消的時候，

邏輯1：我們此時要取消三級對應的二級選單

邏輯2：同時要判斷二級選單對應的一級選單它的子選單是否全部取消
①如果二級選單全部取消，則一級選單取消 ②如果二級選單未全部取消 此時一級選單保留

轉成做了一個gif的動圖來更直觀的感受！

---

當我們點選二級選單取消勾選的時候

邏輯1：我們此時要取消二級對應的子選單即三級選單，所有√取消

邏輯2：同時要判斷二級選單對應的一級選單它的子選單（二級選單本身）是否全部取消
①如果二級選單全部取消，則一級選單取消 ②如果二級選單未全部取消 此時一級選單保留

---

當我們點選三級選單取消勾選的時候

邏輯1：我們此時要取消二級對應的子選單即三級選單，所有√取消

邏輯2：同時要判斷二級選單對應的一級選單它的子選單（二級選單本身）是否全部取消
①如果二級選單全部取消，則一級選單取消 ②如果二級選單未全部取消 此時一級選單保留

---

程式碼只是一種邏輯思維的展示，整體的三級選單邏輯就是這樣，希望我的分享對你有幫助！

copy了element上的一份關於前端三級授權的樹形圖，想順路看看結構就看看吧，也可以去官網看！

<el-tree
  :data="data"
  show-checkbox
  node-key="id"
  :default-expanded-keys="[2, 3]"
  :default-checked-keys="[5]"
  :props="defaultProps">
</el-tree>

<script>
  export default {
    data() {
      return {
        data: [{
          id: 1,
          label: '一級 1',
          children: [{
            id: 4,
            label: '二級 1-1',
            children: [{
              id: 9,
              label: '三級 1-1-1'
            }, {
              id: 10,
              label: '三級 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一級 2',
          children: [{
            id: 5,
            label: '二級 2-1'
          }, {
            id: 6,
            label: '二級 2-2'
          }]
        }, {
          id: 3,
          label: '一級 3',
          children: [{
            id: 7,
            label: '二級 3-1'
          }, {
            id: 8,
            label: '二級 3-2'
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
  };
</script>

---

The best investment is to invest in yourself.

2020.10.29 晚22:15 願你們奔赴在自己的熱愛里！