vant2 级联选择器 van-cascader 实现部分选项禁用

说明：“vant”: “^2.12.42”；级联下拉框没有通过一个disabled就能实现禁用其中某些选项的功能；如果你用的vant3/4，请忽略此文章去看官网。
先上效果图

      <van-cascader
        :title="fieldName"
        ref="cascader"
        v-model="cascader"
        :options="options"
        :closeable="false"
        :field-names="fieldMapping"
        @close="projectsShow = false"
        @finish="finish"
      >
        <template slot="title">
          <div class="cascader-title">
            <div class="operation-button" @click="cancel">取消</div>
            <div>{{ fieldName }}</div>
            <div class="operation-button" @click="confirm">确定</div>
          </div>
        </template>
        <template #option="{ option }"> 
		// 自定义渲染列表，利用复选框自带的禁用disabled,对应的disabledFlag是拿到数据后自己根据需求加的
          <van-checkbox
            v-model="projectObj[option.id]"
            @click="handleChecked(option)"
            :disabled = option.disabledFlag
          >
          // 自定义复选框 隐藏掉前面的小方框
            <template slot="icon">
              <img style="display: none" />
            </template>
            <div>{{ option[label] }}</div>
          </van-checkbox>
        </template>
      </van-cascader>

   // 树状图数据
    getTree() {
      this.$api
        .post(this.url, { code: this.code })
        .then((res) => {
          if (res.success || res.isSuccess) {
            let useOptions = res.data;
            // 获取到接口返回的级联数据，然后送去添加自己要的flag
            this.options = this.setDisableOption(useOptions);
          } else {
            this.$notify.error({
              title: "失败",
              message: "获取数据失败",
            });
          }
        })
        .catch((e) => {
          this.$notify.error({ title: "失败", message: e.message });
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 设定disabled 
    setDisableOption(data) {
      let afterArray = data.map((item) => {
      // children 是子数组
        if (
          item.children === undefined ||
          item.children === null ||
          item.children.length === 0
        ) {
        	//如果子数组是空，说明是该支路最底端 如果是user说明是人，可以选；如果不是，说明是没有下属人员的部门，不可选
          if (item.nodeType === "user") {
            item.disabledFlag = false;
          } else {
            item.disabledFlag = true;
          }
        } else {
        	// children 不为空，说明不是最终节点，可以选，递归判断下一级直到结束
          item.disabledFlag = false;
          this.setDisableOption(item.children);
        }
        return item;
      });
      return afterArray;
    },
    // 确认
      confirm() {
      if ( this.obj.nodeType === "user" ) {
      //  关闭弹框 数据传给外面页面
        this.projectsShow = false;
        this.$emit("confirm", this.obj);
      } else {
      // 未选中人 就点确定 提示一下
        this.$message.error("请选择人员");
      }
    },
      finish(val) {
      var index = val.selectedOptions.length - 1;
      this.obj = val.selectedOptions[index];
    },

// 隐藏掉禁用数据 点击时 后面自动生成的对号
/deep/.van-checkbox.van-checkbox--disabled + i {
    display: none;
}

总结：级联自定义列表为复选框，复选框自定义隐藏掉小方框；数据根据业务添加flag确认该选项是否禁用，该flag用于绑定复选框disabled；最后的样式是点击禁用的数据是，级联选择器也会默认在最后面打勾，隐藏掉。最后，在点击确认时，验证数据，confirm方法根据自身需求，提示请选择之类的