<template>
  <div id="safecheckTree"></div>
</template>
<script>

import $ from "jquery";
export default {
  title:"safecheckTree",
  data(){
    return {
      tree:null,
      layer:null,
      util:null,
      safeTreeData:[],
    }
  },
  ready(){
    console.log("999进入了")
    const _this = this
    layui.use(['tree', 'util'], this.initTree);
  },
  methods:{
    initTree(){
        this.tree = layui.tree
        this.layer = layui.layer
        this.util = layui.util
        this.safeTreeData = [
          {
            "title": "江西",
            "id": 1,
            "children": [
              {
                "title": "南昌",
                "id": 1000,
                "children": [
                  {
                    "title": "青山湖区",
                    "id": 10001,
                    "haha": 2222
                  },
                  {
                    "title": "高新区",
                    "id": 10002
                  }
                ]
              },
              {
                "title": "九江",
                "id": 1001
              },
              {
                "title": "赣州",
                "id": 1002
              }
            ]
          },
          {
            "title": "广西",
            "id": 2,
            "children": [
              {
                "title": "南宁",
                "id": 2000
              },
              {
                "title": "桂林",
                "id": 2001
              }
            ]
          },
          {
            "title": "陕西",
            "id": 3,
            "children": [
              {
                "title": "西安",
                "id": 3000
              },
              {
                "title": "延安",
                "id": 3001
              }
            ]
          }
        ]
        this.tree.render({
          elem: '#safecheckTree',
          data: this.safeTreeData,
          onlyIconControl:true,
          click: this.treeClick,
          showLine: false  //是否开启连接线
        });
    },
    setObj(obj){
      console.log(obj)
    },
    treeClick(obj){
      console.log(obj)
      $("#safecheckTree").find('.layui-tree-entry').removeClass('new-class')
      $(obj.elem.find('.layui-tree-entry')[0]).addClass('new-class')
    }

  }
}
</script>
<style lang="less">
#safecheckTree{
  div{
    height: auto;
  }
  .layui-tree-entry:hover{
    background-color: #eee;
  }
  .new-class{
    background-color: #eee;
  }
}
</style>
