elementui中el-tree获取节点的选中、设置节点的选中

this.$refs.tree.getCheckedNodes()//返回的是数组,包含所有选中的节点,不只是叶子节点。
this.$refs.tree.setCheckedKeys(ids)//传递的是叶子节点的id合集

例子:

/**
 * 节点被点击时的回调
 * @param data - 传递给 data 属性的数组中该节点所对应的对象
 */
nodeClick (data) {
  console.log(data)
  if (data.type === 'user') {
    // 筛选出已经选中的子节点的id集合
    const treeCheckedNodeIds = [...new Set(this.$refs.tree.getCheckedNodes().filter(_item => !_item.child).map(item => item.id))]
    // 获取当前节点的选中状态
    if (!treeCheckedNodeIds.includes(data.id)) {
      if (this.multiple) {
        // 多选
        this.$refs.tree.setCheckedKeys([data.id, ...treeCheckedNodeIds])
      } else {
        // 单选
        this.$refs.tree.setCheckedKeys([data.id])
      }
    } else {
      if (this.multiple) {
        // 多选
        this.$refs.tree.setCheckedKeys([...treeCheckedNodeIds.filter(item => item !== data.id)])
      } else {
        // 单选
        this.$refs.tree.setCheckedKeys([])
      }
    }
  }
},

你可能感兴趣的:(elementui,vue.js,前端)