element-ui el-cascader級聯選擇器設置指定層級不能選中

有時候用element-ui el-cascader級聯選擇器添加分類時會遇到最多添加幾級的限定.看了文檔,只要給須要禁止選擇的選項添加disabled屬性就能夠.可是使用一層一層循環遍歷數據感受很麻煩,本身寫了個遍歷的方法,紀錄下,方便之後使用

貼代碼

cascader.vue

<template>
  <el-dialog
    title="添加分類"
    :visible.sync="dialogVisible"
    width="500px">
    <div class="role_contanier">
      <el-form label-width="80px" :model="typeInfo">
        <el-form-item label="分類名稱">
          <el-input v-model="typeInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="分類組">
          <el-cascader
            v-model="typeInfo.group"
            :options="typeOptions"
            :props="props"
            @change="handleChange">
          </el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">確 定</el-button>
    </span>
  </el-dialog>
</template>
  
  <script>
  export default {
    props: {
      
    },
    data() {
      return {
        dialogVisible: false,
        typeInfo: {
          group: '',
          name: ''
        },
        typeOptions: [], // 分類層級選項
        props: {
          label: 'name', // 顯示的選項
          value: 'id', // 選擇的value值
          children: 'childs', // 子級屬性名
          checkStrictly: true // 能夠選擇任意一級
        } // 指定層級屬性
      }
    },
    created() {
      this.getTypeOptions()
    },
    mounted() {
     
    },
    methods: {
      // 獲取分類級別
      getTypeOptions () {
        // 假設後臺返回的數據 4級
        let resDate = [{
          id: 1,
          name: '食品',
          childs: [
            {id: 3, name: '進口食品', childs: [
                {id: 5, name: '果乾', childs: [{id: 7, name: '堅果',}]}, 
                {id: 6, name: '麪包'}
              ]
            }, 
            {id: 4, name: '國內食品'}
          ]
          }, {id: 2, name: '清潔'}
        ]
        // 限制只能添加4級分類
        this.setDisable (1, resDate, 3)
        console.log(resDate)
        this.typeOptions = resDate
        this.dialogVisible = true
      },

      // 超過3級,不能選中,子級分類最多4級
      /**
       * count: 當前層級
       * data: 當前層級的數據
       * maxNum: 最多不能超過幾級
      */
      setDisable (count, data, maxNum) {
        if (count > maxNum) { //最多幾級就寫幾
          data.forEach(v => {
            v.disabled = true // 超過設定的最大級數,給這一集的數據添加disabled屬性
          })
        } else {
          data.forEach(v => {
            if (v.childs && v.childs.length) {
              count++
              this.setDisable(count, v.childs, maxNum)
            }
          })
        }
      },
      // 添加分類
      submitForm () {

      },
      handleChange (val) {
        console.log(val)
      }
    }
  }
  </script>
  
  <style>

  
  </style>

 效果圖: 第4級,(堅果不能被選中,也就不能再往下添加分類)