Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
<template>
	<div>
		<h2>Tree Filtering</h2>
		<Panel style="width:100%;max-width:600px;min-height:250px">
			<PanelHeader>
				<TextBox style="width:100%" 
						iconCls="icon-search" 
						placeholder="Searching..."
						@valueChange="$refs.tree.doFilter($event.currentValue)">
				</TextBox>
			</PanelHeader>
			<Tree ref="tree" :data="data"></Tree>
		</Panel>
	</div>
</template>

<script>
export default {
  data() {
    return {
      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>