leveltreelist

A Vue.js project

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

使用方法：

1 main.js 全局安装： import LevelTreeList from 'leveltreelist' Vue.component('LevelTreeList',LevelTreeList)

然后在其他.vue文件里面，直接使用组件 <level-tree-list/> 即可
eg:
<level-tree-list :treeData="treeData" @getSelectVal="getSelectVal"></level-tree-list>

data() {
    return {
        nodeIdArr: [],
        treeData: [{ 
        //传入的树数据，参数名必须一样， children: null,nodeLevel, nodeName, id四者缺一不可
            children:[{
                children: [{
                    children: [
                      {
                        children: null,
                        nodeLevel: "4",
                        nodeName: '第三级1.1',
                        id: '0101010102'
                      }
                    ],
                     nodeLevel: "3",
                     nodeName: '第三级1',
                     id: '0101010100'
                }],
                nodeLevel: "2",
                nodeName: '第二级',
                id: '0101000000'
              }],
            nodeLevel: "1",
            nodeName: '第一级',
            id: '00000000'
        }],
    }
},
methods(){
    //getSelectVal：点击checkbox事件;eg：获取当前选中的id数组nodeIdArr
    getSelectVal(isAdd,nodeid,nodeName) {  
    //nodeid:选中或去除选择的id
    //nodeName:选中或去除选择的组织名称
      if(isAdd) {  //选中
        if(this.nodeIdArr.indexOf(nodeid) == -1) {
          this.nodeIdArr.push(nodeid)
        }
      } else {  //去除选中
        if(this.nodeIdArr.indexOf(nodeid) != -1) {
           let index = this.nodeIdArr.indexOf(nodeid);
           this.nodeIdArr.splice(index,1);
         }
      }
    }
}