el-tree树形结构笔记

el-tree树形结构笔记

java 复制代码
<template>
  <div>
    <el-card class="box-card">
      <!-- <el-tree 
        :data="treeData" 
        show-checkbox 
        node-key="id" 
        ref="tree"
        v-model="currentNodeKey"
        check-strictly 
        highlight-current
        @check-change="handleClick" 
        @check="handleNodeClick"
        default-expand-all
        >
      </el-tree> -->
      <el-tree 
        :data="treeData" 
        check-strictly 
        accordion 
        show-checkbox 
        node-key="id" 
        :props="defaultProps"
        @check="handleNodeClick" 
        @check-change="handleClick"
        default-expand-all
        ref="tree">
      </el-tree>
    </el-card>
  </div>
</template>
<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      treeData: [{
        id: 0,
        label: '一级 0',
        children: [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 2,
            label: '二级 1-1',
            children: [{
              id: 3,
              label: '三级 1-1-1'
            }, {
              id: 4,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 5,
          label: '一级 2',
          children: [{
            id: 6,
            label: '二级 2-1'
          }, {
            id: 7,
            label: '二级 2-2'
          }]
        }, {
          id: 8,
          label: '一级 3',
          children: [{
            id: 9,
            label: '二级 3-1'
          }, {
            id: 10,
            label: '二级 3-2'
          }]
        },
        {
          id: 11,
          label: '一级 4',
          children: null,
        },
        {
          id: 12,
          label: '一级 5',
          children: null,
        },
        {
          id: 13,
          label: '一级 6',
          children: null,
        },
        {
          id: 14,
          label: '一级 7',
          children: null,
        },
        {
          id: 15,
          label: '一级 8',
          children: null,
        },
        {
          id: 16,
          label: '一级 9',
          children: null,
        }
        ],
      }],
      currentNodeKey: null, // 当前选中节点的key
    }
  },
  created() {
  },
  methods: {
    handleClick(data, checked, node) {
      if (checked) {
        this.currentNodeKey = data.id
        this.$refs.tree.setCheckedNodes([data]);
        console.log("勾选项目data", data);
        console.log("勾选项目checked", checked);
        console.log("勾选项目node", node);
      }
    },
    handleNodeClick(data, node, self) {
      // 如果已经选中了一个节点,则取消选择
      if (this.currentNodeKey && this.$refs.tree) {
        this.$refs.tree.setCheckedKeys([]);
        // 修改当前选中节点key
        this.$refs.tree.setCheckedNodes([data]);
      }
      // 更新当前选中节点的 key
      this.currentNodeKey = data;
    },

  },

}
</script>
<style>
.box-card {
  height: 600px;
}

/* 修改组件样式 */
.el-checkbox__inner {
  border-radius: 50%;
  border: 1px solid #aaaaaa;
}

/* 隐藏所有子节点 */
/* .el-tree-node__children > .el-tree-node > .el-tree-node__content > .el-checkbox {
  display: none;
} */
/* 只显示最深层次节点 */
/* .el-tree {
    .is-leaf + .el-checkbox .el-checkbox__inner {
        display: none;
}} */
/* 只隐藏根节点勾选框 */
.el-tree>.el-tree-node>.el-tree-node__content .el-checkbox {
  display: none;
}
</style>
相关推荐
WPG大大通15 分钟前
从数据到模型:Label Studio 开源标注工具完整实施指南
经验分享·笔记·ai·系统架构·开源·大大通
我是日安36 分钟前
从零到一打造 Vue3 响应式系统 Day 23 - Watch:基础实现
前端·javascript·vue.js
FogLetter42 分钟前
Map 与 WeakMap:内存管理的艺术与哲学
前端·javascript
前端伪大叔43 分钟前
第15篇:Freqtrade策略不跑、跑错、跑飞?那可能是这几个参数没配好
前端·javascript·后端
charlie1145141911 小时前
精读C++20设计模式——结构型设计模式:享元模式
c++·笔记·学习·设计模式·享元模式·c++20
EQ-雪梨蛋花汤1 小时前
【Unity笔记】Unity XR 模式下 Point Light 不生效的原因与解决方法
笔记·unity·xr
序属秋秋秋4 小时前
《C++进阶之C++11》【lambda表达式 + 包装器】
c++·笔记·学习·c++11·lambda表达式·包装器
Hello_Embed4 小时前
STM32 智能垃圾桶项目笔记(四):PWM 回顾与舵机(SG90)控制实现
笔记·stm32·单片机·学习·嵌入式软件
QL.ql4 小时前
MOS管简单入门笔记(主讲NMOS,PMOS不常用)
笔记
想唱rap4 小时前
归并排序、计数排序以及各种排序稳定性总结
c语言·数据结构·笔记·算法·新浪微博