Vue3 + Element-plus Tree 组件的 @check 事件使用方案

TianXuab2023-08-09 10:45

在 Vue 3 中使用 ElementUI 的 Tree 组件的 @check 事件与 Vue 2 类似。你可以通过监听 @check 事件来处理节点选中状态的变化。以下是在 Vue 3 中如何使用 @check 事件：

首先，确保你已经安装了 ElementUI 组件库。
在你的 Vue 组件中，使用 Tree 组件，并监听 @check 事件：

vue 复制代码

<template>
  <div>
    <el-tree
      :data="treeData"
      show-checkbox
      :node-key="node => node.id" <!-- 使用函数返回节点的 id -->
      @check="handleCheck"
    ></el-tree>


    <el-tree
                :data="scenic.data"
                show-checkbox
                node-key="id"
                :props="defaultProps"
                @check="clic"
                :default-checked-keys="[checkboxed]"
                ref="treeRef"
                :default-expanded-keys="[checkboxed]"
              />
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const treeData = ref([
      {
        id: 1,
        label: 'Node 1',
        children: [
          { id: 2, label: 'Node 1-1' },
          { id: 3, label: 'Node 1-2' },
        ],
      },
      {
        id: 4,
        label: 'Node 2',
        children: [
          { id: 5, label: 'Node 2-1' },
          { id: 6, label: 'Node 2-2' },
        ],
      },
    ]);

    const handleCheck = (checkedNodes, checkedKeys) => {
      console.log('Checked nodes:', checkedNodes);
      console.log('Checked keys:', checkedKeys);
    };

    const checkboxed = ref([]);
		const treeRef = ref<InstanceType<typeof ElTree>>();
		const url = ref([]);

		const defaultProps = {
  		children: "url",
  		label: "name"
		};

    return {
      treeData,
      handleCheck,
    };
  },
};
</script>

<style>
/* 在这里添加你的样式 */
</style>

在这个示例中，我们使用了 Vue 3 的 Composition API，通过 ref 来定义响应式数据。与 Vue 2 不同的是，Vue 3 使用 setup() 函数来设置组件的逻辑。在 setup() 函数中，我们定义了 treeData 和 handleCheck 方法。

与 Vue 2 相似，我们在 el-tree 组件中使用 show-checkbox 属性显示复选框，并通过 :node-key 属性来设置节点的唯一标识（这里使用了一个函数返回节点的 id）。然后，在 @check 事件中调用 handleCheck 方法来处理选中状态的变化。

请根据你的实际需求进行逻辑处理。这只是一个简单的示例，你可以根据实际情况来设计你的 Tree 组件和处理方法。