树（el-tree）

设置默认高亮

属性：node-key
方法：setCurrentKey

data(){
treeData:[]
},
isExpandTree:false

this.$nextTick(() => {
      this.$refs.tree.setCurrentKey(this.treeData[0].id)
})

修改选中行颜色

/deep/.el-tree-node.is-current > .el-tree-node__content {
  background-color: #44b3c7;
  color: white;
}

点击节点的时添加子节点数据

handleNodeClick（data）{
       data.children = 数据源
}

点击加载子节点：自动展开子节点数据

handleNodeClick（data,node）{
  if (node.expanded) {
            this.isExpandTree = false
            node.expanded = false
       } else {
           node.expanded = true
   }
}

节点删除、修改、添加操作

tree.png

          
            
              {{ node.label }}
              
            
            
              
              
              
            
          

样式

js

  data() {
    const data = [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }];
    return {
      data: JSON.parse(JSON.stringify(data)),
      data: JSON.parse(JSON.stringify(data)),
      defaultProps: {
        children: "children",
        label: "label",
      }
      newTreeData:[]
    };
  },
  mounted() {
    this.dgDataInit(this.data)
  },
 methods: {
    handleShowBtn(node,data){
      this.dgData(this.data,data)
      this.data = this.newTreeData
    },
    dgData(data,nodeItem,type){
      data.forEach(item=>{
       if(item.id===nodeItem.id){
          if(!item.isInput){//没有输入框的时候
             item.nodeChecked = true
          }
        }else{
          item.nodeChecked = false
          item.isInput = false
        }
        
        if(item.children){
          this.dgData(item.children,nodeItem)
        }
      })
      this.newTreeData = JSON.parse(JSON.stringify(this.data))
    },
    dgDataInit(data){
      data.forEach(item=>{
         item.isInput = false
         item.nodeChecked = false
        if(item.children){
          this.dgDataInit(item.children)
        }
      })
    },
    dgDataEdit(data,nodeItem){
      data.forEach(item=>{
       if(item.id===nodeItem.id){
          item.isInput = true
          this.$nextTick(()=>{
            console.log(nodeItem.id)
            console.log(this.$refs['input'+nodeItem.id])
            this.$refs['input'+nodeItem.id].focus()
          })
          item.nodeChecked = false
        }else{
          item.isInput = false
          item.nodeChecked = false
        }
        
        if(item.children){
          this.dgDataEdit(item.children,nodeItem)
        }
      })
      this.newTreeData = JSON.parse(JSON.stringify(this.data))
    },
    dgDataBlur(data,nodeItem){//失去焦点
      data.forEach(item=>{
       if(item.id===nodeItem.id){
          item.isInput = false
          item.nodeChecked = true
        }else{
          item.isInput = false
        }
        
        if(item.children){
          this.dgDataBlur(item.children,nodeItem)
        }
      })
      this.newTreeData = JSON.parse(JSON.stringify(this.data))
    },
    handleBlur(node, data){//失去焦点
      this.dgDataBlur(this.data,data)
      this.data = this.newTreeData
    },
    handleAppend(data){//增加节点
      const newChild = { id: id++, label: 'testtest', children: [] };
      if (!data.children) {
        this.$set(data, 'children', []);
      }
      data.children.push(newChild);
    },
    handleInput(event){
      console.log(event)
    },
    handleEdit(node,data){//编辑节点
      this.handleShowBtn(node,data)
      this.dgDataEdit(this.data,data)
      this.data = this.newTreeData
    },
    handleRemove(node, data){//删除节点
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
    },
    handleNodeClick(data, node, tag) {
      // console.log(data,node);
    }
  }

角色权限提交页面的使用

懒加载