vue Element tree 设置为单选多选 并设置默认选中的值

<template>
  <div class="nodeTag">
    <el-tree
        ref="treeForm"
        :data="nodeBaseLabelsList"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        :default-expanded-keys="[nodeSelectedId]"
        :default-checked-keys="[nodeSelectedId]"
        check-strictly
        @check-change="changeNodeLabel"
      >
      </el-tree>

  </div>
</template>

<script>
export default {
  props: {
    isTheRadio: Boolean// 树结构是否单选 true 为单选  fasle为多选(默认不传为fasle)
  },
  data() {
    return {
      defaultProps: {
        label: 'name'
      },
      nodeBaseLabelsList: [], // 节点树数据
      treeIndex: 0,
      nodeSelectedId:'',//默认选中的id
      labelNodesList: [],//
    }
  },
  mounted() {
    this.getReturnNodeBase(this.objectType)
  },
  methods: {
    // 监听树
    changeNodeLabel(data, checked, node) {
      const checkedIdS = this.$refs.treeForm.getCheckedKeys()//获取选中的值
      if (this.isTheRadio) this.setTheRadio(data, checked, node)// 是否设置单选
    },
    // 设置单选
    setTheRadio(data, checked, node) {
      this.treeIndex++
      if (this.treeIndex % 2 === 0) {
        if (checked) {
          this.nodeSelectedId = ''
          this.$refs.treeForm.setCheckedNodes([])
          this.$refs.treeForm.setCheckedNodes([data])
          // 交叉点击节点
        } else {
          this.$refs.treeForm.setCheckedNodes([])// 点击已经选中的节点,置空
        }
      }
    },
    // 获取节点树数据
    getReturnNodeBase() {
       // 初始赋值
       this.labelNodesList =[]
        if (this.newNode.cname) {
          this.$nextTick(() => {
            this.nodeSelectedId = this.newNode.cname//设置初始值
          })
          //树子结构触发选中
          this.labelNodesList.forEach(item => {
            if (item.cname === this.newNode.cname && item.parentId) {
              this.$refs.treeForm.setCheckedNodes([item])
              this.addNodeLabel()
            }
          })
        }
    },
  }
}
</script>


  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值