el-tree树形结构笔记

el-tree树形结构笔记

<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>