vue element 树形结构获取已勾选

this.defaultCheckedKeys=[]无法置空 可以使用 this.$refs.tree.setCheckedKeys([]) ，第一次使用可能会报错，建议加判断;

default-expanded-keys(默认展开项)
:props="defaultProps" 用法
通过render-content方法定义树节点内容(js代码)
:load="loadChildData" （load 加载子树数据的方法，仅仅当lazy属性为true时生效）(js代码)
@node-click="handleNodeClick"

 

<template>
  <div>
    <el-tree
      ref="asd"
      :data="data2"
      show-checkbox
      default-expand-all
      node-key="id"
      :default-checked-keys="defaultCheckedKeys"
      :props="defaultProps"
      @check-change="nodeChange"
      @node-click="nodeClick"
    >
    </el-tree>
  </div>
</template>

<script>

export default {
  name: 'DynamicTable',
  data() {
    return {
      data2: [
        {
          name: '用户管理',
          id: '101',
          children: [
            {
              name: '添加',
              id: '3',
              parentId: '1',
              children: [
                {
                  name: 'AAAAAA',
                  id: '544',
                  parentId: '1'
                },
                {
                  name: 'BBBBB',
                  id: '555',
                  parentId: '1'
                },
              ]
            },
            {
              name: '删除',
              id: '5',
              parentId: '1'
            },
            {
              name: '修改',
              id: '6',
              parentId: '1'
            }
          ]
        },
        {
          name: '角色管理',
          id: '2'
        },
        {
          name: '机构管理',
          id: '4'
        }
      ],
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      defaultCheckedKeys: []
    }
  },
  created() {},
  methods: {
    nodeChange(data, flag, childFlag) {
      // 半选
      const banxuan = this.$refs.asd.getHalfCheckedKeys()
      if (flag === true) {
        console.log('新增菜单：' + data.name )
      } else {
        if (childFlag === true) {
          if (!banxuan.includes(data.id)) {
            console.log('新增菜单：' + data.name )
          }
        }
        if (!banxuan.includes(data.id)) {
          console.log('删除菜单：' + data.name )
        }
      }
    },
    nodeClick(data) {
      console.log(data.name)
    }
  }
}
</script>