<template>
  <div>
    <ul style="padding-left:40px;">
      <li class="class-item" v-for="item in data" :key="item.index">
        <el-checkbox v-model="item.checked" @change="onChange">{{item.label}}</el-checkbox>
        <tree :data="item.children"></tree>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Tree",
  props:['data'],
  data () {
    return {
      checked:false,
      checks:[]
    }
  },
  methods:{
    onChange () {
      var that = this
      function convertToElementTree(node) {
        if (node.checked === true) {
          that.$store.dispatch('checkClass',node.value)
        } else {
          that.$store.dispatch('uncheckClass',node.value)
        }
      }
      that.data.forEach((element) => {
        convertToElementTree(element)
      });
    },
  }
}
</script>

<style scoped>
.class-item{
  /* height: 40px; */
  font-size: 1.5rem;
  
}
</style>