实现一个移动端的三级tree组件，支持多选、单选、全选、全不选、最好兼容vant组件库、用vue2写，添加测试数据和调用过程

好的，下面是一个Vue2版本的移动端三级tree组件实现，支持多选、单选、全选、全不选，并且兼容vant组件库：

<template>
  <van-tree-select
    v-model="checkedList"
    :items="items"
    :height="height"
    :max-height="maxHeight"
    :main-active-index.sync="mainActiveIndex"
    :active-id.sync="activeId"
    :border="false"
    :accordion="accordion"
    :selected-icon="selectedIcon"
    :click-nav="clickNav"
    @click-nav="onClickNav"
  >
    <template v-slot:content="{ item }">
      <div class="tree-item">
        <van-checkbox
          v-model="item.checked"
          :name="item.id"
          @change="onChange(item)"
        />
        <span>{{ item.label }}</span>
      </div>
    </template>
  </van-tree-select>
</template>

<script>
import { TreeSelect, Checkbox } from 'vant';
import { cloneDeep } from 'lodash';

export default {
  name: 'ThreeLevelTree',
  components: {
    VanTreeSelect: TreeSelect,
    VanCheckbox: Checkbox,
  },
  props: {
    items: {
      type: Array,
      required: true,
    },
    height: {
      type: [Number, String],
      default: 300,
    },
    maxHeight: {
      type: [Number, String],
      default: 300,
    },
    accordion: {
      type: Boolean,
      default: true,
    },
    selectedIcon: {
      type: String,
      default: 'success',
    },
    clickNav: {
      type: Boolean,
      default: false,
    },
    defaultValue: {
      type: [String, Number, Array],
      default: null,
    },
    defaultChecked: {
      type: Array,
      default: () => [],
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    checkStrictly: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      checkedList: cloneDeep(this.defaultChecked),
      mainActiveIndex: 0,
      activeId: this.defaultValue,
    };
  },
  watch: {
    defaultValue: {
      handler(val) {
        this.activeId = val;
      },
      immediate: true,
    },
    defaultChecked: {
      handler(val) {
        this.checkedList = cloneDeep(val);
      },
      immediate: true,
    },
  },
  methods: {
    onClickNav({ index }) {
      this.mainActiveIndex = index;
    },
    onChange(item) {
      if (!this.multiple) {
        this.checkedList = [];
      }
      if (item.children && !this.checkStrictly) {
        this.checkChildren(item, item.checked);
        this.checkParent(item);
      } else {
        this.checkSelf(item);
        this.checkParent(item);
      }
      this.$emit('change', cloneDeep(this.checkedList));
    },
    checkSelf(item) {
      const index = this.checkedList.findIndex(
        (v) => v.id === item.id && v.label === item.label
      );
      if (item.checked && index === -1) {
        this.checkedList.push(item);
      } else if (!item.checked && index !== -1) {
        this.checkedList.splice(index, 1);
      }
    },
    checkChildren(item, checked) {
      if (!item.children) {
        return;
      }
      item.children.forEach((child) => {
        child.checked = checked;
        this.checkChildren(child, checked);
      });
    },
    checkParent(item) {
      if (!item.parent) {
        return;
      }
      const parent = this.getItemById(item.parent);
      if (!parent) {
        return;
      }
      const checkedChildrenCount = parent.children.filter((child) => child.checked).length;
      parent.checked = checkedChildrenCount === parent.children.length;
      this.checkParent(parent);
    },
    getItemById(id, items = this.items) {
      for (let i = 0; i < items.length; i++) {
        const item = items[i];
        if (item.id === id) {
          return item;
        }
        if (item.children) {
          const result = this.getItemById(id, item.children);
          if (result) {
            return result;
          }
        }
      }
      return null;
    },
    checkAll() {
      this.items.forEach((item) => {
        item.checked = true;
        this.checkChildren(item, true);
      });
      this.checkedList = cloneDeep(this.items);
      this.$emit('change', cloneDeep(this.checkedList));
    },
    uncheckAll() {
      this.items.forEach((item) => {
        item.checked = false;
        this.checkChildren(item, false);
      });
      this.checkedList = [];
      this.$emit('change', []);
    },
  },
};
</script>

<style scoped>
.tree-item {
  display: flex;
  align-items: center;
}
</style>

上面的代码中，我们使用了vant的TreeSelect组件来实现Tree组件，并自定义了节点的内容区域。我们通过props属性接收组件的数据源，并通过data属性初始化组件的状态。在Tree组件中，我们实现了多选、单选、全选、全不选等功能，并通过事件和状态管理来实现这些功能。在组件的methods属性中，我们定义了一些辅助方法，用于实现复杂的业务逻辑。

为了测试这个组件，我们可以在父组件中引入这个组件，并传入测试数据和props属性：

<template>
  <div class="container">
    <three-level-tree
      :items="items"
      :default-checked="defaultChecked"
      :multiple="true"
      @change="onChange"
    />
    <van-button @click="checkAll">全选</van-button>
    <van-button @click="uncheckAll">全不选</van-button>
  </div>
</template>

<script>
import ThreeLevelTree from './ThreeLevelTree.vue';

export default {
  name: 'App',
  components: {
    ThreeLevelTree,
  },
  data() {
    return {
      items: [
        {
          id: 1,
          label: '一级节点1',
          children: [
            {
              id: 11,
              label: '二级节点1-1',
              children: [
                {
                  id: 111,
                  label: '三级节点1-1-1',
                },
                {
                  id: 112,
                  label: '三级节点1-1-2',
                },
              ],
            },
            {
              id: 12,
              label: '二级节点1-2',
              children: [
                {
                  id: 121,
                  label: '三级节点1-2-1',
                },
                {
                  id: 122,
                  label: '三级节点1-2-2',
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: '一级节点2',
          children: [
            {
              id: 21,
              label: '二级节点2-1',
              children: [
                {
                  id: 211,
                  label: '三级节点2-1-1',
                },
                {
                  id: 212,
                  label: '三级节点2-1-2',
                },
              ],
            },
            {
              id: 22,
              label: '二级节点2-2',
              children: [
                {
                  id: 221,
                  label: '三级节点2-2-1',
                },
                {
                  id: 222,
                  label: '三级节点2-2-2',
                },
              ],
            },
          ],
        },
      ],
      defaultChecked: [
        {
          id: 111,
          label: '三级节点1-1-1',
        },
        {
          id: 122,
          label: '三级节点1-2-2',
        },
      ],
    };
  },
  methods: {
    onChange(val) {
      console.log('选中的节点：', val);
    },
    checkAll() {
      this.$refs.tree.checkAll();
    },
    uncheckAll() {
      this.$refs.tree.uncheckAll();
    },
  },
};
</script>

上面的代码中，我们定义了一个父组件，包含了一个三级tree组件和两个按钮。我们给三级tree组件传入了测试数据和props属性，并监听change事件输出选中的节点。在组件中，我们通过$refs获取到三级tree组件的实例，并通过调用checkAll和uncheckAll方法实现全选和全不选功能。

最后，我们将父组件渲染到页面中：

<template>
  <div id="app">
    <app />
  </div>
</template>

<script>
import App from './App.vue';

export default {
  components: {
    App,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

上面的代码中，我们将App组件渲染到页面中。至此，我们就完成了一个Vue2版本的移动端三级tree组件的实现，支持多选、单选、全选、全不选，并且兼容vant组件库。