uni-app 树形列表展示组件 支持勾选功能

在uni-app中实现一个支持勾选的树形列表展示组件，可以使用递归组件的方式来实现。以下是一个简单的示例代码，展示如何实现这个功能。

首先，我们需要定义树形数据结构和组件。假设树形数据结构如下：

[
    {
        "id": 1,
        "label": "Node 1",
        "children": [
            {
                "id": 2,
                "label": "Node 1-1",
                "children": []
            },
            {
                "id": 3,
                "label": "Node 1-2",
                "children": []
            }
        ]
    },
    {
        "id": 4,
        "label": "Node 2",
        "children": []
    }
]

接下来，我们创建一个递归组件 TreeNode.vue：

<template>
  <view>
    <checkbox :value="checked" @change="handleCheckChange" />
    <label>{{ node.label }}</label>
    <view v-if="hasChildren" style="padding-left: 20px;">
      <tree-node
        v-for="(child, index) in node.children"
        :key="index"
        :node="child"
        :checked.sync="child.checked"
        @check-change="handleChildCheckChange(index)"
      />
    </view>
  </view>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: Object,
    checked: Boolean
  },
  computed: {
    hasChildren() {
      return this.node.children && this.node.children.length > 0;
    }
  },
  methods: {
    handleCheckChange(e) {
      this.$emit('update:checked', e.detail.value);
      this.$emit('check-change');
    },
    handleChildCheckChange(index) {
      // Handle child check change if needed, e.g., parent checkbox logic
      this.$emit('check-change');
    }
  }
}
</script>

在主组件中使用 TreeNode 组件，并管理树形数据：

<template>
  <view>
    <tree-node
      v-for="(node, index) in treeData"
      :key="index"
      :node="node"
      :checked.sync="node.checked"
      @check-change="handleTreeCheckChange"
    />
  </view>
</template>

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

export default {
  components: {
    TreeNode
  },
  data() {
    return {
      treeData: [
        // ... your tree data here
      ]
    };
  },
  methods: {
    handleTreeCheckChange() {
      // Handle overall tree check change if needed
    }
  }
}
</script>

以上代码展示了如何使用递归组件来展示树形结构，并支持节点的勾选功能。注意，这里的 checked 属性使用了 .sync 修饰符，以实现父子组件之间的双向绑定。每个节点都包含一个 checkbox 组件，当勾选状态改变时，会触发相应的事件处理函数。