Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
<template>
	<div>
		<h2>Checkbox Tree</h2>
		<Tree :data="data" :checkbox="true" @checkChange="checkedNodes=$event"></Tree>
		<div style="padding: 4px 16px">
			<div>Checked Nodes:</div>
			<div v-for="(node,index) in checkedNodes" :key="index">{{index+1}} - {{node.text}}</div>
		</div>
	</div>
</template>

<script>
export default {
  data() {
    return {
      checkedNodes: null,
      data: this.getData()
    };
  },
  methods: {
    getData() {
      return [
        {
          id: 1,
          text: "My Documents",
          children: [
            {
              id: 11,
              text: "Photos",
              state: "closed",
              children: [
                {
                  id: 111,
                  text: "Friend"
                },
                {
                  id: 112,
                  text: "Wife"
                },
                {
                  id: 113,
                  text: "Company"
                }
              ]
            },
            {
              id: 12,
              text: "Program Files",
              children: [
                {
                  id: 121,
                  text: "Intel"
                },
                {
                  id: 122,
                  text: "Java"
                },
                {
                  id: 123,
                  text: "Microsoft Office"
                },
                {
                  id: 124,
                  text: "Games"
                }
              ]
            },
            {
              id: 13,
              text: "index.html"
            },
            {
              id: 14,
              text: "about.html"
            },
            {
              id: 15,
              text: "welcome.html"
            }
          ]
        }
      ];
    }
  }
};
</script>