问答

Select选择器选择label时,如何实现树形控件同步处于点击状态?

作者:admin 2021-06-27 我要评论

初始化的前端页面如下: 当我点击左边树形控件的子节点时,右边的select选择器label值能同步,效果如下: 但是现在我想通过select选择器选择任意label值时,对应...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

初始化的前端页面如下:

12.png

当我点击左边树形控件的子节点时,右边的select选择器label值能同步,效果如下:

13.png

但是现在我想通过select选择器选择任意label值时,对应的子节点却没法处于点击状态,如图:

14.png

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){
    //做一些操作
}

})

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • Select选择器选择label时,如何实现树

    Select选择器选择label时,如何实现树

  • element ui Multiple Select 抖动

    element ui Multiple Select 抖动

  • react中使用百度地图函数中获取实例对

    react中使用百度地图函数中获取实例对

  • mongodb数组的匹配问题。

    mongodb数组的匹配问题。

腾讯云代理商
海外云服务器