a-tree-select组件@change事件中获取到原数组中的其他属性

 场景:页面上展示一个a-tree-select组件,但是我需要再change变动时获取到gateway

我的源数据:

//locationList数据格式
locationList:[

{
value:'xxxxxxxxxxxx',
key:'xxxxxxxxxxxxxxx',
title:'xxxxxxxxxxxxxx',
gateway:'xxxxxxxxxx',
children:[]
},

{
value:'xxxxxxxxxxxx',
key:'xxxxxxxxxxxxxxx',
title:'xxxxxxxxxxxxxx',
gateway:'xxxxxxxxxx'
}

]

方法有两种:

1、使用:replace-fields替换为想要的gateway,在change事件触发时,通过value就拿到了gateway,

但是这种方式有一个局限性:gatwway必须为唯一的值,不能与其他项的gateway重复。

:replace-fields="{
value: 'gateway',
label: 'title'
}"
    // 空间改变
    treeSelectChange(value, label, extra) {
      console.log('value',value)
    },

 

 2、使用 change的参数extra获取,具体方法:extra.triggerNode.$vnode.data.props.gateway

(由于,我的数据中gateway可能为空也可能重复,所以使用方法一会报错,所以我使用的是方法2.)

   
    // 空间改变
    treeSelectChange(value, label, extra) {
      console.log(
        ' extra.triggerNode.$vnode.data.props.value',
        extra.triggerNode.$vnode.data.props,
        extra.triggerNode.$vnode.data.props.gateway
      )
// extra.triggerNode.$vnode.data.props获取到选中项的所有属性
// extra.triggerNode.$vnode.data.props.gateway拿到想要的gateway属性

      this.queryParam.gatewayId = extra.triggerNode.$vnode.data.props.gateway//将gateway保存起来
    },

你可能感兴趣的:(java,前端,服务器)