element中Tree 树形控件实现多选、展开折叠、全选全不选、父子联动、默认展开、默认选中、默认禁用、自定义节点内容、可拖拽节点、手风琴模式

以下是使用Element UI的<el-tree>组件实现多选、折叠、全选、全不选、父子联动、默认展开的示例代码：

<template>
  <el-tree
    :data="data"
    show-checkbox
    node-key="id"
    :props="defaultProps"
    :default-expanded-keys="defaultExpandedKeys"
    :default-checked-keys="defaultCheckedKeys"
    @check-change="handleCheckChange"
  ></el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          label: '一级 1',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1'
                },
                {
                  id: 10,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        // ...（其他数据）
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      defaultExpandedKeys: [1, 2, 3], // 默认展开的节点
      defaultCheckedKeys: [5, 6, 7], // 默认选中的节点
    };
  },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      // 实现全选全不选
      if (checked) {
        this.checkAll = false;
        this.isIndeterminate = false;
      } else {
        this.checkAll = false;
        this.isIndeterminate = (
          this.$refs.tree.getCheckedKeys().length > 0 ||
          this.$refs.tree.getHalfCheckedKeys().length > 0
        );
      }
    },
    handleCheckAllChange(val) {
      // 实现全选全不选
      this.$refs.tree.setCheckedKeys(val ? this.data.map(d => d.id) : []);
    }
  }
};
</script>

在这个例子中，<el-tree>组件设置了show-checkbox属性以支持多选。node-key属性用来指定节点的唯一标识，这里是id。default-expanded-keys属性用来设置默认展开的节点，default-checked-keys属性用来设置默认选中的节点。handleCheckChange方法用来处理节点的选中状态变化，实现父子联动。handleCheckAllChange方法用来处理全选全不选的状态变化。