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

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

  1. 首先,确保你已经安装了 ElementUI 组件库。
  2. 在你的 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() 函数中,我们定义了 treeDatahandleCheck 方法。

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

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

相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
咖啡教室12 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript
咖啡教室12 小时前
前端开发中JavaScript、HTML、CSS常见避坑问题
前端·javascript·css
市民中心的蟋蟀15 小时前
第五章 使用Context和订阅来共享组件状态
前端·javascript·react.js