vue3.0中使用ref,并且调用elementPlus里面的tree树形组件里面的getCheckedNodes方法

15 篇文章 1 订阅
13 篇文章 0 订阅
<el-tree
						ref="treeRef"
						:data="nameList"
						:props="defaultProps"
						show-checkbox
						:default-expand-all="false"
						v-if="contro"
					/>
<script lang="ts">
import { defineComponent, reactive, toRefs, watch, ref, Ref } from 'vue';

	setup(props, { emit }) {
		const treeRef: Ref = ref(null);
function dataDetermination() {
			let nameListHandle: Array<any> = treeRef.value.getCheckedNodes();
return {
			treeRef,
			...toRefs(state),
  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue 3使用Element Plus树形控件进行懒加载可以按照以下步骤进行: 1. 首先,需要安装Element Plus和Axios: ```bash npm install element-plus axios --save ``` 2. 然后,在你的组件导入Element Plus的树形控件和Axios: ```vue <template> <el-tree :data="treeData" :load="loadNode"></el-tree> </template> <script setup> import { ref } from 'vue' import axios from 'axios' import { ElTree } from 'element-plus' const treeData = ref([]) function loadNode(node, resolve) { if (node.level === 0) { axios.get('/api/getRootNodes').then((response) => { resolve(response.data) }) } else { axios.get('/api/getChildrenNodes', { params: { id: node.id } }).then((response) => { resolve(response.data) }) } } </script> ``` 3. 在`<script setup>`标签,我们首先使用`ref`函数定义了一个名为`treeData`的响应式变量,它将会存储树形控件的数据。我们还导入了Element Plus的树形控件,并将其在模板使用。最后,我们定义了一个名为`loadNode`的函数作为树形控件的`load`属性,该函数将在树形控件需要加载子节点时被调用。 4. 在`loadNode`函数,我们首先检查当前节点的层级是否为0。如果是0,则表示需要加载根节点,我们就使用Axios发送一个请求到`/api/getRootNodes`接口,并在请求成功后调用`resolve`函数将数据传递给树形控件。如果不是0,则表示需要加载当前节点的子节点,我们就使用Axios发送一个请求到`/api/getChildrenNodes`接口,并在请求成功后调用`resolve`函数将数据传递给树形控件。注意,我们在请求子节点时还需要将当前节点的`id`作为参数传递给接口。 这样,我们就使用Vue 3和Element Plus的树形控件实现了懒加载。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值