element ui 树形控件点击

**Element UI 树形控件点击事件**

在 Element UI 中，树形控件（Tree）是用于展示数据结构的控件，它可以显示一棵树状的数据结构。点击树形控件中的某个节点，可以触发相应的事件处理函数。

### 一、基本使用首先，我们需要引入 Element UI 的 Tree 组件，然后在 Vue 中使用它：

html<template>
 <div>
 <el-tree :data="data" @node-click="handleNodeClick"></el-tree>
 </div>
</template>

<script>
export default {
 data() {
 return {
 data: [
 {
 label: '一级1',
 children: [
 { label: '二级1-1' },
 { label: '二级1-2' }
 ]
 },
 {
 label: '一级2',
 children: [
 { label: '二级2-1' },
 { label: '二级2-2' }
 ]
 }
 ]
 }
 },
 methods: {
 handleNodeClick(data, node) {
 console.log(data); // 点击的节点数据 console.log(node); // 点击的节点信息 }
 }
}
</script>

在上面的示例中，我们定义了一个 `data` 数组，用于存储树形控件中的数据。然后，在 `handleNodeClick` 方法中，我们可以通过 `console.log` 输出点击的节点数据和信息。

### 二、事件处理函数在 Element UI 中，Tree 组件提供了几个事件处理函数，可以在这些函数中进行自定义操作：

* `node-click`: 当用户点击树形控件中的某个节点时触发。
* `node-contextmenu`: 当用户右键点击树形控件中的某个节点时触发。
* `node-dblclick`: 当用户双击树形控件中的某个节点时触发。

我们可以通过在 `methods` 中定义相应的函数来实现这些事件处理函数：

html<template>
 <div>
 <el-tree :data="data" @node-click="handleNodeClick" @node-contextmenu="handleNodeContextmenu" @node-dblclick="handleNodeDblclick"></el-tree>
 </div>
</template>

<script>
export default {
 data() {
 return {
 data: [
 {
 label: '一级1',
 children: [
 { label: '二级1-1' },
 { label: '二级1-2' }
 ]
 },
 {
 label: '一级2',
 children: [
 { label: '二级2-1' },
 { label: '二级2-2' }
 ]
 }
 ]
 }
 },
 methods: {
 handleNodeClick(data, node) {
 console.log(data); // 点击的节点数据 console.log(node); // 点击的节点信息 },
 handleNodeContextmenu(data, node) {
 console.log(data); // 右键点击的节点数据 console.log(node); // 右键点击的节点信息 },
 handleNodeDblclick(data, node) {
 console.log(data); // 双击的节点数据 console.log(node); // 双击的节点信息 }
 }
}
</script>

在上面的示例中，我们定义了三个事件处理函数：`handleNodeClick`、`handleNodeContextmenu` 和 `handleNodeDblclick`。这些函数分别用于处理点击事件、右键点击事件和双击事件。

### 三、自定义树形控件Element UI 提供了一个 `el-tree-node` 组件，可以用来自定义树形控件的显示样式：

html<template>
 <div>
 <el-tree :data="data" node-key="label">
 <span slot-scope="{ node, data }" class="custom-tree-node">
 {{ node.label }}
 <span v-if="node.children && node.children.length" class="el-icon el-icon-arrow-right"></span>
 </span>
 </el-tree>
 </div>
</template>

<script>
export default {
 data() {
 return {
 data: [
 {
 label: '一级1',
 children: [
 { label: '二级1-1' },
 { label: '二级1-2' }
 ]
 },
 {
 label: '一级2',
 children: [
 { label: '二级2-1' },
 { label: '二级2-2' }
 ]
 }
 ]
 }
 }
}
</script>

在上面的示例中，我们使用 `slot-scope` 来自定义树形控件的显示样式。我们可以通过修改 `custom-tree-node` 的样式来实现自定义效果。

### 四、总结Element UI 提供了一个强大的 Tree 组件，可以用于展示数据结构。在本文中，我们介绍了如何使用 Element UI 的 Tree 组件，包括基本使用、事件处理函数和自定义树形控件。通过阅读本文，你应该能够轻松地使用 Element UI 的 Tree 组件来实现你的需求。