elmentui Tree组件单选问题以及清除选中状态

1、实现单选功能:主要利用tree组件中的check、setCheckedKeys方法,需要注意的是,此时必须设置node-key,其值为节点数据中的一个字段名,该字段在整棵树中是唯一的。

<el-tree
        ref="tree"
        :data="data"
        show-checkbox
        node-key="dictCode"
        :props="defaultProps"
        @check="handleCheck"
        :filter-node-method="filterNode"
        style="height:360px;overflow:scroll;overflow-x:auto"
      >
      </el-tree>
handleCheck(data, checked) {
      if(data.parentCode=='0'){
        this.$message.warning('不能选择父节点,请重新选择')
        this.$refs.tree.setChecked(data, false) // 取消当前节点的选中状态
      } else{
        this.dictLabel = data
        this.$refs.tree.setCheckedKeys([data.dictCode]) // 单选
      }
    },

2、清除复选框状态:封装一个清除的函数,在需要清除的地方调用函数

reset(){
      this.data.forEach(ele=>{ // 把已选中的复选框清除
        this.$nextTick(()=>{
          this.$refs.tree.setChecked(ele.dictCode,false,true)
        })
      })
    }

3、在弹框每次弹起的时候 清除树的选择状态:监听弹框

watch: {
    dialogVisible(newVal,oldVal){
      if(newVal == true){
        this.reset()
      }
    }
  },

你可能感兴趣的:(解题思路,javascript,前端,vue.js)