vue2-tree v1.1.0

贡献者名单

• lily7129

develop logs

• 2017-5-2: 支持下拉树, add combotree
• 2017-5-26: 添加父节点半选状态框
• 2017-6-08: 修复火狐复选事件的bug
• 2017-6-21: 修复动态渲染

QQ交流群:255965810

How to run demo

npm install
npm run dev 

在线Demo

点击进入线上效果

效果图

示例

<template>
  <div style="width:300px;">
    <tree ref ='tree' :treeData="treeData" :options="options" @node-click='handleNode'/>
  </div>
</template>
<script>
import Tree from '../components/tree/tree.vue'
export default {
  name: 'test',
  data () {
    return {
      options: {
        showCheckbox: true,
        halfCheckedStatus: true,//控制父框是否需要半钩状态( lily7129 贡献代码)
        search: {
          useInitial: true,
          useEnglish: false,
          customFilter: null
        }
      },
      treeData: [
        {
          id: 1,
          label: '一级节点',
          open: true,
          checked: false,
          nodeSelectNotAll: false,//新增参数，表示父框可以半钩状态
          parentId: null,
          visible: true,
          searched: false,
          children: [
            {
              id: 2,
              label: '二级节点-1',
              checked: false,
              nodeSelectNotAll: false,
              parentId: 1,
              searched: false,
              visible: true
            },
            {
              label: '二级节点-2',
              open: true,
              checked: false,
              nodeSelectNotAll: false,
              id: 3,
              parentId: 1,
              visible: true,
              searched: false,
              children: [
                {
                  id: 4,
                  parentId: 3,
                  label: '三级节点-1',
                  visible: true,
                  searched: false,
                  checked: false,
                  nodeSelectNotAll: false
                },
                {
                  id: 5,
                  label: '三级节点-2',
                  parentId: 3,
                  searched: false,
                  visible: true,
                  checked: false,
                  nodeSelectNotAll: false
                }
              ]
            },
            {
              label: '二级节点-3',
              open: true,
              checked: false,
              nodeSelectNotAll: false,
              id: 6,
              parentId: 1,
              visible: true,
              searched: false,
              children: [
                {
                  id: 7,
                  parentId: 6,
                  label: '三级节点-4',
                  checked: false,
                  nodeSelectNotAll: false,
                  searched: false,
                  visible: true
                },
                {
                  id: 8,
                  label: '三级节点-5',
                  parentId: 6,
                  checked: false,
                  nodeSelectNotAll: false,
                  searched: false,
                  visible: true
                }
              ]
            }
          ]
        }
      ]
    }
  },
  components: {
    Tree
  }
}
</script>

属性

     options: {
        showCheckbox: true,  //是否支持多选,
        halfCheckedStatus: true,//控制父框是否需要半钩状态,
        search: {
          useInitial: true, //是否支持拼音首字母搜索
          useEnglish: false, //是否是英文搜索
          customFilter: null // 自定义节点过滤函数
        }

    /* 节点元素 */
    {
      id: 1, //节点标志
      label: '一级节点', //节点名称
      open: true, // 是否打开节点
      checked: false, //是否被选中
      parentId: null, //父级节点Id
      visible: true, //是否可见
      searched: false, //是否是搜索值,
      nodeSelectNotAll: false,//表示父框可以半钩状态
      children: [] //子节点
    }

方法

事件