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 组件和处理方法。

相关推荐
小宋10217 分钟前
实现Excel文件和其他文件导出为压缩包,并导入
java·javascript·excel·etl
码喽哈哈哈7 分钟前
day01
前端·javascript·html
mubeibeinv40 分钟前
分页/列表分页
java·前端·javascript
林太白1 小时前
js属性-IntersectionObserver
前端·javascript
爱吃羊的老虎1 小时前
【WEB开发.js】getElementById :通过元素id属性获取HTML元素
前端·javascript·html
GISer_Jing2 小时前
Vue3常见Composition API详解(适用Vue2学习进入Vue3学习)
前端·javascript·vue.js
yangqii2 小时前
工作中可以用到的前端小知识(不定时更新)
javascript
bpmf_fff2 小时前
十、事件类型(鼠标事件、焦点.. 、键盘.. 、文本.. 、滚动..)、事件对象、事件流(事件捕获、事件冒泡、阻止冒泡和默认行为、事件委托)
前端·javascript
计算机学姐2 小时前
基于SSM的宠物领养平台
java·vue.js·spring·maven·intellij-idea·mybatis·宠物
工业互联网专业3 小时前
Python毕业设计选题:基于django+vue的期货交易模拟系统的设计与实现
vue.js·python·django·毕业设计·源码·课程设计