Vue使用基于element-ui的el-tree-fransfer树形穿梭框组件

el-tree-fransfer 是一个基于 VUE 和 element-ui 的树形穿梭框组件，使用前请确认已经引入element-ui

官网npm文档：https://www.npmjs.com/package/el-tree-transfer

github：https://github.com/hql7/tree-transfer

效果

安装

npm install el-tree-transfer --save
或
npm i el-tree-transfer -S

组件中使用

<template><div class="el-tree-transfer-page"><div class="el-tree-transfer-container"><TreeTransfer:title="title":from_data="fromData":to_data="toData":defaultProps="{ label: 'label',children: 'children', disabled: 'disabled' }"node_key="id"pid="pid"@add-btn="add"@remove-btn="remove":mode="mode"height="100%"filteropenAll/></div></div>
</template>
<script>
import TreeTransfer from "el-tree-transfer"; // 引入
export default {data() {return {mode: "transfer", // transfer addressListtitle: ['组外人员', '组内人员'],fromData: [{id: "1",pid: 0,label: "一级 1",children: [{id: "1-1",pid: "1",label: "二级 1-1",disabled: true,children: []},{id: "1-2",pid: "1",label: "二级 1-2",children: [{id: "1-2-1",pid: "1-2",children: [],label: "二级 1-2-1"},{id: "1-2-2",pid: "1-2",children: [],label: "二级 1-2-2"}]}]}],toData: []}},components: { TreeTransfer },methods: {// 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressListchangeMode() {if (this.mode == "transfer") {this.mode = "addressList";} else {this.mode = "transfer";}},// 监听穿梭框组件添加add(fromData, toData, obj) {// 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象// 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表console.log("fromData:", fromData);console.log("toData:", toData);console.log("obj:", obj);},// 监听穿梭框组件移除remove(fromData, toData, obj) {// 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象// 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表console.log("fromData:", fromData);console.log("toData:", toData);console.log("obj:", obj);},},
};
</script>
<style scoped>
.el-tree-transfer-page {width: 100%;height: 100%;position: relative;
}
.el-tree-transfer-container {width: 60%;height: 80%;position: absolute;top: 50%;left: 10%;transform: translateY(-50%);border: 1px solid #f5f7fa;
}
</style>

Vue使用基于element-ui的el-tree-fransfer树形穿梭框组件相关推荐

一个基于vue和element-ui的树形穿梭框组件
el-tree-transfer 简介因为公司业务使用vue框架,ui库使用的element-ui.在市面上找到一个好用的vue树形穿梭框组件都很难,又不想仅仅因为一个穿梭框在element-ui之 ...
基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...
模糊搜索——Vue单页面-Element UI
模糊搜索--Vue单页面-Element UI <!DOCTYPE html> <html><head><meta charset="UTF-8&q ...
npm创建Vue工程【element UI】
npm创建Vue工程[element UI] 步骤 # 初始化一个名为 hello-vue 的Vue工程 vue init webpack hello-vue# 进入 hello-vue 工程 cd ...
element ui中的el-dropdown（下拉框）防止点一下就隐藏的问题
element ui中的el-dropdown(下拉框)防止点一下就影藏的问题当使用el-dropdown下拉框时,下拉框的每项中,可能需要加入@click.@change或复选框等事件,而el-d ...
vue 穿梭框组件
前言:由于项目需要,element ui 里面的穿梭框不满足需求,所以自己封装了一个穿梭框,此穿梭框为三个,可以两两穿梭. 如下图: 代码如下:如有bug ,欢迎指出: 其实数据的传输,最好用vuex ...
vue仿iview穿梭框组件
vue仿iview穿梭框组件微信公众号:前端程序猿之路关注可了解更多的前端知识,反馈问题或建议,请公众号留言. 如果你觉得公众号内容对你有帮助,欢迎关注并转载穿梭框中左侧为源数据,右侧为目标数据 ...
Vue引入第三方Element UI 组件
Element UI 官网地址: 各种基于Vue.js的各种UI组件 https://element.eleme.cn/#/zh-CN/component/quickstart https://ele ...
基于Element ui 实现输入框只能输入数字并支持千分位
实现效果设置子组件 <template><el-inputref="money"v-model.trim="money":placehold ...

Vue使用基于element-ui的el-tree-fransfer树形穿梭框组件

效果

安装

组件中使用

Vue使用基于element-ui的el-tree-fransfer树形穿梭框组件相关推荐

最新文章

热门文章