<!--author: luoshuo-->
<!--date: 2017-10-12-->
<style scoped>
  .cust_div_input {
    padding-bottom: 10px;
  }
  .cust_div .el-tree {
    max-height: 400px;
    overflow-y: auto;
  }
</style>
<template>
  <div class="cust_div">
    <el-input class="cust_div_input" placeholder="输入关键字进行过滤" v-model="filterText" v-show="search"></el-input>
    <el-tree class="filter-tree"
    :data="data" :props="defaultProps" @node-click="nodeClick" :node-key="nodeKey"
    :default-expand-all="expandAll" :filter-node-method="filterNode"
    :show-checkbox="showCheckBox" :highlight-current="highlight"
    :default-checked-keys="defaultCheckedKeys" :accordion="accordion"
    @check-change="checkChange" @current-change="currentChange"
    @node-expand="nodeExpand" @node-collapse="nodeCollapse" ref="tree"></el-tree>
  </div>
</template>
<script>
  export default {
    watch: {
      filterText (val) {
        this.$refs.tree.filter(val)
      }
    },
    methods: {
      // 过滤节点
      filterNode (value, data) {
        if (!value) return true
        return data.label.indexOf(value) !== -1
      },
      // 若节点可被选择，则返回目前被选中的节点所组成的数组
      getCheckedNodes (leafOnly) {
        return this.$refs.tree.getCheckedNodes(leafOnly)
      },
      // 设置目前勾选的节点，使用此方法必须设置 node-key 属性
      setCheckedNodes (nodes) {
        this.$refs.tree.setCheckedNodes(nodes)
      },
      // 若节点可被选择,则返回目前被选中的节点所组成的数组
      getCheckedKeys (leafOnly) {
        return this.$refs.tree.getCheckedKeys(leafOnly)
      },
      // 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性
      setCheckedKeys (keys, leafOnly) {
        this.$refs.tree.setCheckedKeys(keys, leafOnly)
      },
      // 通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性
      setChecked (obj, checked, deep) {
        this.$refs.tree.setChecked(obj, checked, deep)
      }
    },
    props: {
      search: Boolean, // 是否有搜索框
      data: Array, // 树形控件数据
      nodeKey: String, // 节点的唯一标识
      expandAll: Boolean, // 是否展开所有节点
      accordion: Boolean, // 是否展开所有节点
      showCheckBox: Boolean, // 是否有复选框
      highlight: Boolean, // 是否高亮显示选中节点
      defaultCheckedKeys: Array, // 默认选中节点
      nodeClick: { // 节点单击事件
        type: Function,
        default: function (msg) {
        }
      },
      checkChange: { // 节点选中状态发生变化时的
        type: Function,
        default: function () {

        }
      },
      currentChange: { // 当前选中节点变化时触发的事件
        type: Function,
        default: function () {

        }
      },
      nodeExpand: { // 节点被展开时触发的事件
        type: Function,
        default: function () {

        }
      },
      nodeCollapse: { // 节点被关闭时触发的事件
        type: Function,
        default: function () {

        }
      }
    },
    data () {
      return {
        filterText: '',
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },
    mounted () {
//      console.log('哇哈哈', this.filterVal)
    }
  }
</script>

