element ui el-tree 的使用之 只勾选三级节点禁用除三级以外的节点

<template>
  <div class="index">
    <h1>这是 index.vue 页面</h1>
    <!-- default-expand-all -->
    <el-tree
      :data="data"
      show-checkbox
      node-key="id"
      :props="defaultProps"
      ref="tree"
      accordion
      @check="handleClick"
      :default-checked-keys="checkedKeys"
      :default-expanded-keys="
        data[0] && [data[0].id] && [data[0].children[0].id]
      "
    />
  </div>
</template>

<script>
export default {
  name: "index",
  components: {},
  props: {},
  data() {
    return {
      data: [
        {
          id: 1,
          label: "一级 1",
          disabled: true,
          level: 1,
          children: [
            {
              id: 4,
              label: "二级 1-1",
              disabled: true,
              level: 2,
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                  level: 3,
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                  level: 3,
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          disabled: true,
          level: 1,
          children: [
            {
              id: 5,
              label: "二级 2-1",
              disabled: true,
              level: 2,
              children: [
                {
                  id: 91,
                  label: "三级 2-1-1",
                  level: 3,
                },
                {
                  id: 101,
                  label: "三级 2-1-2",
                  level: 3,
                },
              ],
            },
            {
              id: 6,
              label: "二级 2-2",
              disabled: true,
              level: 2,
              children: [
                {
                  id: 911,
                  label: "三级 2-2-1",
                  level: 3,
                },
                {
                  id: 1011,
                  label: "三级 2-2-2",
                  level: 3,
                },
              ],
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          disabled: true,
          level: 1,
          children: [
            {
              id: 7,
              label: "二级 3-1",
              level: 2,
              children: [
                {
                  id: 9111,
                  label: "三级 3-1-1",
                  level: 3,
                },
                {
                  id: 10111,
                  label: "三级 3-1-2",
                  level: 3,
                },
              ],
            },
            {
              id: 8,
              label: "二级 3-2",
              level: 2,
              disabled: true,
              children: [
                {
                  id: 91111,
                  label: "三级 3-2-1",
                  level: 3,
                },
                {
                  id: 101111,
                  label: "三级 3-2-2",
                  level: 3,
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      checkedKeys: [],
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleClick(node, checked) {
      if (node.level === 2) {
        this.$nextTick(() => {
          this.$refs.tree.setChecked(node.id, false);
        });
        return;
      }

      if (node.level === 3) {
        if (checked) {
          if (this.checkedKeys.includes(node.id)) {
            this.checkedKeys = [];
            this.$refs.tree.setCheckedKeys([]);
          } else {
            this.checkedKeys = [node.id];
            this.$refs.tree.setCheckedKeys(this.checkedKeys);
          }
        } else {
          this.checkedKeys = [];
          this.$refs.tree.setCheckedKeys([]);
        }
      }
    },
  },
};
</script>

<style scoped lang="scss"></style>