初始化的前端页面如下:
当我点击左边树形控件的子节点时,右边的select选择器label值能同步,效果如下:
但是现在我想通过select选择器选择任意label值时,对应的子节点却没法处于点击状态,如图:
select选择GSL2,但是左边的点击状态还是在900D4_LD2上,如何才能让点击状态对应的背景色同步到GSL2,大佬们遇到过嘛????### 问题描述
问题出现的环境背景及自己尝试过哪些方法
相关代码
粘贴代码文本(请勿用截图)
你期待的结果是什么?实际看到的错误信息又是什么?
###一,左边选中右边也选中:
select设置双向数据绑定的值v-model="value",点击左边的子项,赋值到value
二:右边选中左边也选中
左边和右边的数据渲染是不是同个数据结构?如果是,根据map判断唯一值是否相等,控制左边active,比如:
右边select有change事件,回调获取选中的数据item
数据结构list
list.map(e=>{
if(e.id == item.id){
//做一些操作
}
})
补充:
html结构
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" ref="tree" :node-key="value" highlight-current :current-node-key="value"></el-tree>
<el-select v-model="value" placeholder="请选择" @change="setCheckedKeys">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
data数据结构
options: [
{value: '2', label: 'CORS4_LD2'},
{value: '3', label: '900D4_LD2'},
{value: '32', label: 'GSL2'},
{value: '60', label: '906B-GGB-RTK'}
],
data: [{
label: 'GSL1',
children: [{value: '2', label: 'CORS4_LD2'},
{value: '3', label: '900D4_LD2'},
{value: '32', label: 'GSL2'},
{value: '60', label: '906B-GGB-RTK'}]
}],
defaultProps: {
children: 'children',
label: 'label'
},
value: ''
methods方法
handleNodeClick(value){
this.value = value.value
console.log('这是什么?',value)
},
setCheckedKeys(value){
console.log('选中的值',value)
this.data.map(a=>{
a.children.map(b=>{
if(b.value == value){
console.log('进来了吗',value)
this.$nextTick(() =>{
this.$refs.tree.setCurrentKey([value]);
console.log('dfdf',this.$refs.tree)
})
}
})
})
},
###
一,左边选中右边也选中:
select设置双向数据绑定的值v-model="value",点击左边的子项,赋值到value
二:右边选中左边也选中
左边和右边的数据渲染是不是同个数据结构?如果是,根据map判断唯一值是否相等,控制左边active,比如:
右边select有change事件,回调获取选中的数据item
数据结构list
list.map(e=>{
if(e.id == item.id){
//做一些操作
}
})