vue2 H5多选树

以下是一个基于Vue2实现的H5多选树的示例代码：

<template>
  <div class="tree">
    <ul>
      <li v-for="item in treeData" :key="item.id">
        <input type="checkbox" v-model="item.checked" @change="checkAllChildren(item)">
        {{ item.name }}
        <ul v-if="item.children && item.children.length">
          <tree-item :tree-data="item.children" :level="level + 1"></tree-item>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TreeItem',
  props: {
    treeData: {
      type: Array,
      required: true
    },
    level: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      isExpand: false
    }
  },
  computed: {
    // 根据level计算缩进距离
    indent() {
      return {
        paddingLeft: `${this.level * 20}px`
      }
    }
  },
  methods: {
    // 递归设置所有子节点的选中状态
    checkAllChildren(item) {
      if (item.children && item.children.length) {
        item.children.forEach(child => {
          child.checked = item.checked
          this.checkAllChildren(child)
        })
      }
    }
  },
  components: {
    TreeItem
  }
}
</script>

在这个示例中，我们使用了递归组件来实现树形结构，同时在每个节点上添加了一个多选框。当用户勾选或取消勾选某个节点时，我们会递归设置该节点的所有子节点的选中状态。