el-tree 穿梭树

最新推荐文章于 2023-05-23 15:24:24 发布

北寻北爱

最新推荐文章于 2023-05-23 15:24:24 发布

阅读量263

点赞数

分类专栏： vue 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_43415562/article/details/125676994

版权

本文介绍了如何在Vue.js项目中实现穿梭树的功能，包括展示效果和具体的实现代码，适用于前端开发中的数据选择和传递场景。

摘要由CSDN通过智能技术生成

穿梭树及显示效果

在这里插入图片描述

实现代码

<template>
	<div style="height:300px">
        <el-scrollbar>
            <el-tree ref="showTree" :data="showNewTree" :expand-on-click-node="false" default-expand-all node-key="id" highlight-current empty-text="">
    			<span slot-scope="{
  {node}}">
                    <span>{
  {node.label}}</span>
                    <span>
                        <i class="yi-del" @click="showRemove(node)"
    				</span>
    			</span>
    		</el-tree>
    	</el-scrollbar>
    </div>
	<el-dialog title="添加访问端" @close="handleClose">
    	<el-row>
            <el-col :span="10">
                <div style="height:300px">
                    <el-scrollbar>
                        <el-tree ref="tree" :data="oldTree" :show-checkbox="true" default-expand-all node-key="id" highlight-current/>
                    </el-scrollbar>
                </div>
            </el-col>
            <el-col :span="4">
                <el-button @click="opera">
                </el-button>