element ui Tree 树形控件

Element UI Tree 树形控件是一种常见的前端组件，它能够以树形结构展示数据，通常用于菜单、目录结构、分类等场景。在 Element UI 中，Tree 树形控件有多种使用方式，包括普通树、可复选树、可拖拽树、异步加载树等等。它提供了丰富的 API 和事件，可以方便地实现展开、折叠、选中、禁用等功能。

下面是 Element UI Tree 树形控件常用的 props：
- data：Tree 的数据源。
- props：自定义数据源字段名。
- node-key：每个树节点的唯一标识符。
- expand-on-click-node：点击节点时是否展开或折叠节点。
- default-expand-all：是否默认展开所有节点。

下面是 Element UI Tree 树形控件常用的 events：
- node-click：当某个节点被点击时触发。
- check-change：当节点选中状态发生变化时触发。
- current-change：当当前选中节点发生变化时触发。
- node-expand：当某个节点被展开时触发。

相关问题

element ui tree 树形控件添加节点过滤和show-checkbox后，过滤节点后如何控制只能选择到可见节点

在 Element UI 的 Tree 树形控件中，可以结合使用过滤和 show-checkbox 属性来实现节点过滤和只能选择可见节点的效果。具体实现步骤如下：

1. 设置 Tree 组件的 filter-node-method 属性，这个属性可以指定一个过滤方法，用于过滤不需要显示的节点。例如：

<template>
  <el-tree
    :data="data"
    :filter-node-method="filterNode"
    :show-checkbox="true"
    @check-change="handleCheckChange"
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      data: [
        // 树形数据
      ]
    }
  },
  methods: {
    filterNode(value, data) {
      // 过滤节点的方法
      // value 为搜索框中输入的值
      // data 为当前节点的数据对象
      // 返回 true 表示需要显示节点，返回 false 表示不需要显示节点
      return data.label.indexOf(value) !== -1;
    },
    handleCheckChange(data, checked) {
      // 处理节点选中事件
      // data 为选中节点的数据对象
      // checked 为选中状态，true 为选中，false 为取消选中
    }
  }
}
</script>

上面的代码中，我们设置了 filter-node-method 属性为 filterNode 方法。这个方法会在过滤节点时被调用，我们在这个方法中通过判断当前节点的 label 是否包含搜索框中输入的值来决定节点是否需要显示。

2. 在 handleCheckChange 方法中，需要判断当前选中的节点是否可见。如果节点不可见，则需要取消选中它。例如：

handleCheckChange(data, checked) {
  const node = this.$refs.tree.getNode(data.key); // 获取当前节点的 DOM 元素
  if (node && !node.offsetParent) {
    // 如果节点不可见，则取消选中它
    this.$refs.tree.setChecked(data.key, false);
  }
}

上面的代码中，我们首先通过 this.$refs.tree.getNode(data.key) 方法获取当前节点的 DOM 元素，然后判断这个元素的 offsetParent 属性是否为 null。如果为 null，说明节点不可见，我们就通过 this.$refs.tree.setChecked(data.key, false) 方法取消选中它。

通过上面的实现，我们就可以实现节点过滤和只能选择可见节点的效果了。

element ui 表单树形控件

Element UI 提供了 Tree Select 组件，可以实现树形结构的选择功能。但是如果需要在表单中使用树形结构，可以使用 el-tree 或 el-tree-select 组件，并结合表单组件使用。

el-tree-select 组件是基于 el-select 和 el-tree 组件封装的，可以在下拉框中展示树形结构，并支持搜索、多选等功能。

使用 el-tree-select 组件需要注意以下几点：
1. 需要设置 :props="{label: 'name', children: 'children'}"，指定节点的 label 和 children 属性。
2. 需要设置 :node-key="id"，指定节点的唯一标识符。
3. 需要设置 v-model 绑定选中的节点或节点数组。

示例代码如下：

<template>
  <el-form :model="form">
    <el-form-item label="分类">
      <el-tree-select
        v-model="form.category"
        :data="treeData"
        :props="{label: 'name', children: 'children'}"
        :node-key="id"
        multiple
        filterable
        clearable
        placeholder="请选择分类">
      </el-tree-select>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        category: []
      },
      treeData: [
        {
          id: 1,
          name: '分类1',
          children: [
            {
              id: 11,
              name: '子分类1-1'
            },
            {
              id: 12,
              name: '子分类1-2'
            }
          ]
        },
        {
          id: 2,
          name: '分类2',
          children: [
            {
              id: 21,
              name: '子分类2-1'
            },
            {
              id: 22,
              name: '子分类2-2'
            }
          ]
        }
      ]
    }
  }
}
</script>