element-ui 树形选择器

Element-UI 提供了一个树形选择器组件，可以用于选择树形结构的数据。在使用树形选择器之前，需要先引入 Element-UI 库并注册树形选择器组件。

下面是一个简单的示例代码：

<template>
  <div>
    <el-tree :data="data" show-checkbox node-key="id" ref="tree" :props="defaultProps"></el-tree>
    <el-button type="primary" @click="getCheckedNodes">获取选中节点</el-button>
  </div>
</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'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1'
            },
            {
              id: 6,
              label: '二级 2-2'
            }
          ]
        },
        {
          id: 3,
          label: '一级 3',
          children: [
            {
              id: 7,
              label: '二级 3-1'
            },
            {
              id: 8,
              label: '二级 3-2'
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    getCheckedNodes() {
      const checkedNodes = this.$refs.tree.getCheckedNodes();
      console.log(checkedNodes);
    }
  }
};
</script>

在上述示例中，我们使用了 `el-tree` 组件来展示树形结构数据，并设置了 `show-checkbox` 属性以显示复选框。我们还设置了 `node-key` 属性来指定节点的唯一标识符，以便在获取选中节点时使用。

在 `el-tree` 组件中，我们还设置了 `props` 属性来指定节点的属性名称。在上述示例中，我们指定了 `children` 属性为子节点数组，`label` 属性为节点文本。

最后，我们在页面中添加了一个按钮，当按钮被点击时会调用 `getCheckedNodes` 方法来获取选中的节点，并将结果输出到控制台中。

以上就是使用 Element-UI 树形选择器的示例代码。