ElementUI中tree组件何如两边同步展开
Vue2环境下，ElementUI中tree组件何如两边同步展开。左边是一个组件，右边也是一个组件，数据写死了，两边数据一样的，想听听大家有啥想法
我点左边任意一级，左边数展开了，右边也要展开，点右边的，左边也要展开
做这个应该不难，但是你的把前提描述清除了。
- 这两个之间的关系是什么，相互关联的，例如，我点了左边的A项，那么右边的C项就要展开，他俩的数据通过什么关联。
- 是单向的还是双向的？即，只是点击左边的右边同步展开还是点击右边的时候左边也需要相应的展开？
明确了上面的2个前提条件。那么就在这两个组件的选中展开的事件中根据条件1的关联关系设置另外一个组件中对应的值，就能把另外一个组件展开了。具体代码得你的明确前2条件才能提供了。
你试试下面的这个代码，应该是能满足你说的这个需求的。
<el-tree :data="data" :node-key="nodeKey" auto-expand-parent :default-expanded-keys="opened" :props="defaultProps"
@node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse"></el-tree>
<el-tree :data="data" :node-key="nodeKey" auto-expand-parent :default-expanded-keys="opened" :props="defaultProps"
@node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse"></el-tree>
//最低data()中定义下面的变量
defaultProps : {children: "children", label: 'label'};
nodeKey : "label";
data : [
{
label: '一级 1',
children: [
{
label: '二级 1-1',
children: [
{
label: '三级 1-1-1',
},
],
},
],
},
{
label: '一级 2',
children: [
{
label: '二级 2-1',
children: [
{
label: '三级 2-1-1',
},
],
},
{
label: '二级 2-2',
children: [
{
label: '三级 2-2-1',
},
],
},
],
},
{
label: '一级 3',
children: [
{
label: '二级 3-1',
children: [
{
label: '三级 3-1-1',
},
],
},
{
label: '二级 3-2',
children: [
{
label: '三级 3-2-1',
},
],
},
],
},
]);
opened :['一级 1'];
//在method中定义下面的函数
const handleNodeExpand = (node_data) => {
let data_temp = JSON.parse(JSON.stringify(data.value));
let opened_temp = JSON.parse(JSON.stringify(opened.value));
if (!opened_temp.includes(node_data[nodeKey])) {
opened_temp = [node_data[nodeKey], ...opened_temp];
}
opened.value = [];
opened.value = opened_temp;
this.$nextTick(() => {
data.value = [];
data.value = data_temp;
});
};
const handleNodeCollapse = (node_data) => {
let data_temp = JSON.parse(JSON.stringify(data.value));
let opened_temp = JSON.parse(JSON.stringify(opened.value));
if (opened_temp.includes(node_data[nodeKey])) {
opened_temp.splice(opened_temp.indexOf(node_data[nodeKey]), 1);
}
opened.value = [];
opened.value = opened_temp;
this.$nextTick(() => {
data.value = [];
data.value = data_temp;
});
};
//这是父组件
template>
<div>
<div class="contrastArea">
<div class="leftTree">
<ContrastTree :myData="myData" @edit="edit"/>
</div>
<div class="rightTree">
<ContrastTree :myData="myData" @edit="edit"/>
</div>
</div>
</div>
</template>
<script>
import ContrastTree from "./ContrastTree.vue";
export default {
components: {
ContrastTree,
},
data(){
return{
myData: [
{
id:"1",
label: "一级 1",
children: [
{
id:"1-1",
label: "二级 1-1",
children: [
{
id:"1-1-1",
label: "三级 1-1-1",
},
],
},
],
},
{
id:"2",
label: "一级 2",
children: [
{
id:"2-1",
label: "二级 2-1",
children: [
{
id:"2-1-1",
label: "三级 2-1-1",
},
],
},
{
id:"2-2",
label: "二级 2-2",
children: [
{
id:"2-2-1",
label: "三级 2-2-1",
},
],
},
],
},
{
id:"3",
label: "一级 3",
children: [
{
id:"3-1",
label: "二级 3-1",
children: [
{
id:"3-1-1",
label: "三级 3-1-1",
},
],
},
{
id:"3-2",
label: "二级 3-2",
children: [
{
id:"3-2-1",
label: "三级 3-2-1",
},
],
},
],
},
],
defaultProps: {
children: "children",
label: "label",
},
}
},
methods:{
edit(value){
this.myData.push(value)
console.log("edit",this.myData);
}
}
};
</script>
之前跟vue3的代码弄混了，重新弄了一下，你试试，先用这个给你的代码跑通了再说。
<template>
<el-tree :data="data" :node-key="nodeKey" auto-expand-parent :default-expanded-keys="opened" :props="defaultProps" @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse"></el-tree>
<hr/>
<el-tree :data="data" :node-key="nodeKey" auto-expand-parent :default-expanded-keys="opened" :props="defaultProps" @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse"></el-tree>
</template>
data() {
return {
data: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
defaultProps: {
children: 'children',
label: 'label',
},
opened:[],
nodeKey:'label'
};
},
methods: {
handleNodeExpand(node_data){
let data_temp = JSON.parse(JSON.stringify(this.data));
let opened_temp = JSON.parse(JSON.stringify(this.opened));
if (!opened_temp.includes(node_data[this.nodeKey])) {
opened_temp = [node_data[this.nodeKey], ...opened_temp];
}
this.opened = [];
this.opened = opened_temp;
this.$nextTick(() => {
this.data = [];
this.data = data_temp;
});
},
handleNodeCollapse(node_data){
console.log(node_data, this.opened);
let data_temp = JSON.parse(JSON.stringify(this.data));
let opened_temp = JSON.parse(JSON.stringify(this.opened));
if (opened_temp.includes(node_data[this.nodeKey])) {
opened_temp.splice(opened_temp.indexOf(node_data[this.nodeKey]), 1);
}
this.opened = [];
this.opened = opened_temp;
this.$nextTick(() => {
this.data = [];
this.data = data_temp;
});
}
}