Vue 项目使用树形穿梭框报错
按着教程走
然后一直报TypeError: merge is not a function.
百度出来的教程 不管用
然后去element官网
升级了element
npm i element-ui -S
在npm run dev
成功编译，
把饿了么更新到最新 就可以了。
其他教程都是可以参考Git上的开源。
参考：https://github.com/hql7/tree-transfer
基本要求做这个效果的都是这个教程。
首先 下载树形穿梭的插件
<html>：
<tree-transfer
:title="title"
:from_data="fromData"
:to_data="toData"
:defaultProps="{label:'label'}"
@addBtn="add"
@removeBtn="remove"
:mode="mode"
height="400px"
openAll
></tree-transfer>
<script>：
import treeTransfer from "el-tree-transfer"; //引用
export default{
data(){
return{
//穿梭框
title: ["待选", "已选"],
mode: "transfer", //设置模式，字段可选值为transfer|addressList 类型：String 必填：false 补充：mode默认为transfer模式，即树形穿梭框模式，可配置字段为addressList改为通讯录模式，通讯录模式时按钮不可自定义名字，如要自定义标题名在title数组传入四个值即可，addressList模式时标题默认为通讯录、收件人、抄送人、密送人
fromData: [
//源数据 类型：Array 必填：true 补充：数据格式同element-ui tree组件，但必须有id和pid
{
id: "1",
pid: 0, //自定义pid的参数名，默认为"pid" 必填：false
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: [],
},
methods:{
// 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
changeMode() {
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);
}
},
components: { treeTransfer }, // 注册 (写在methods钩子外)
效果：
其他的属性参考Git连接。
做带联动的选择框。
以上是 Vue 项目使用树形穿梭框报错 的全部内容， 来源链接： utcz.com/z/375627.html
