<template>
  <div>
		<h2>Multiple ComboTree</h2>
		<ComboTree style="width:300px"
				v-model="value" 
				:data="data" 
				:multiple="true"
				:textFormatter="formatText">
			<Tree slot="tree"></Tree>
		</ComboTree>
		<p v-if="value">You selected: {{value}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: null,
      data: [
        {
          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"
            }
          ]
        }
      ]
    };
  },
  methods: {
    formatText(value) {
      if (this.value && this.value.length > 3) {
        return this.value.length + " nodes selected";
      }
      return value;
    }
  }
};
</script>