Vue学习--ElementUI--函数在默认参数下自定义参数以Tree中的@checked为例


一、不传入自定义参数

ElementUI组件库的Tree中@check有两个默认参数,selectNode函数中可以获取到两个默认参数
在这里插入图片描述

<el-tree
      :key="refreshTreeGUID"
      :data="data"
      :node-key="data.id"
      show-checkbox
      check-on-click-node
      @check="selectNode" 不用加()
    />
export default {
  ... 
  data() {
    return {
      refreshTreeGUID: this.GUID(),
      value: 'testtest',
      data: [
        {
          id: 1,
          label: '一级 1'
        },
        {
          id: 2,
          label: '一级 2'
        },
        {
          id: 3,
          label: '一级 3'
        },
        {
          id: 4,
          label: '一级 4'
        }
      ]
    }
  },
  methods: {
  	//刷新树
    GUID() {
      return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random() * 16 | 0
        var v = c === 'x' ? r : (r & 0x3 | 0x8)
        return v.toString(16)
      })
    },
    selectNode(data, checkinfo) {
      console.log('data', data)
      console.log('checkinfo', checkinfo)
    }
  }
}
</script>

在这里插入图片描述
在这里插入图片描述
可得data和checkinfo中的值

二、直接自定义参数报错

在selectNode中传入value

@check=“selectNode(value)”

  selectNode(data, checkinfo, value) {
      console.log('data', data)
      console.log('checkinfo', checkinfo)
      console.log('value', value)
    }

在这里插入图片描述

可以看出value为空,可知value没有被传入函数

三、解决方法

将值为’testtest’的value传入selectNode,形式如下
其中 data,checkinfo是默认参数,value是自定义参数

@check="(data,checkinfo)=>selectNode(data,checkinfo,value)"
在这里插入图片描述
可以看到 参数被正确传入函数中


版权声明:本文为weixin_45726044原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。