element-ui中tree组件的单选解决方案

element-ui中tree组件单选并修改选中的值解决方案

• 主要利用tree组件中三个重要方法getCheckedKeys()、setCheckedNodes()、getNode()
  效果如下：
  
• 代码如下：

template：
      <el-tree
        :data="data"
        ref="tree"
        show-checkbox
        :default-expand-all="boolTrue"
        :check-on-click-node="boolTrue"
        :props="defaultProps"
        @check-change="handleClick">
      </el-tree>
      
js：
export default {
  data() {
  	return {
	   boolTrue: true,
  	   data: [{
          label: '身院决',
          children: [ {label:  '选国社'} ]
         }]
  	}
  },
  methods: {
    handleClick(data, checked) {
      if (checked) {
        this.$refs.tree.setCheckedNodes([data])
      }
      this.changebrand()
    },
    changebrand() {
      const checkedKeys = this.$refs.tree.getCheckedKeys()
      const node = this.$refs.tree.getNode(checkedKeys[0] || '')
      const data = node ? node.data : {}
      this.$set(this.tmpObj, 'commonGoodsName', data.goodsName)
      this.$set(this.tmpObj, 'commonGoodsId', data.id)
    }, // 更新选中节点的值  
  }
}
``