Kendo UI for Vue TreeView：如何实现父勾选时自动勾选子复选框？

Hey there! I’ve got you covered on this one—Kendo UI Vue’s TreeView actually has a native configuration to handle auto-checking child nodes when a parent is checked, no manual event handling required.

The key here is using the checkable prop as an object (instead of just a boolean) and enabling the checkChildren option. Here’s how to implement it:

Basic Implementation (Auto-Check Children) #

<template>
  <kendo-treeview
    :data-items="treeDataSource"
    :checkable="{ checkChildren: true }"
    text-field="text"
    items-field="items"
    has-children-field="hasChildren"
  ></kendo-treeview>
</template>

<script>
export default {
  data() {
    return {
      treeDataSource: [
        {
          text: "Parent Item 1",
          hasChildren: true,
          items: [
            { text: "Child Item 1.1" },
            { text: "Child Item 1.2" }
          ]
        },
        {
          text: "Parent Item 2",
          hasChildren: true,
          items: [
            { text: "Child Item 2.1" },
            { text: "Child Item 2.2" }
          ]
        }
      ]
    };
  }
};
</script>

Bonus: Two-Way Check Sync (Auto-Check Parents When Children Are Checked) #

If you also want parent nodes to automatically update their check state based on children (including semi-selected states for partial child checks), add the checkParents: true option to the checkable object:

<kendo-treeview
  :data-items="treeDataSource"
  :checkable="{ checkChildren: true, checkParents: true }"
  text-field="text"
  items-field="items"
  has-children-field="hasChildren"
></kendo-treeview>

Why This Works (And Why jQuery/MVC Syntax Didn’t) #

The Vue wrapper for Kendo UI structures configuration differently than the jQuery or MVC versions. Instead of separate standalone properties for child checking, it’s all encapsulated in the checkable object. This is the official, native way to enable this behavior without writing custom event handlers or manual state management.

Give this a try—it should handle exactly what you’re looking for with zero extra manual code!

内容的提问来源于stack exchange，提问作者ZippyZippedUp