実装リファレンス

ElementUIツリーコントロールは、選択されたノードと親ノードをどのように取得しますか（すべてが選択されていなくても）

https://segmentfault.com/q/1010000012309004

アップグレードされたelementUIバージョン

オリジナルから

"element-ui"： "2.13.2"

自動的ににアップグレード

"element-ui"： "^ 2.15.1"

2.2以降のバージョンにアップグレードされないのは奇妙です。elementUIの最新の公式バージョンは2.2.2だと思います。

私の認識

ページ

選択したレベルをデフォルトで展開するように設定します

checkStrictly：false、

dialogVisible：false、

dialogType： 'new'、

ExpandedRoles：[]、//デフォルトで展開されたノードのキーの配列

defaultProps：{

children： 'children'、//ノードオブジェクトの属性値としてサブツリーを指定します

label： 'title' //ノードオブジェクトの属性値としてノードラベルを指定します

}

<el-form-item label="权限">
          <!-- check-strictly 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false -->
          <!-- node-key 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 -->
          <el-tree
            ref="tree"
            :check-strictly="checkStrictly"
            :data="routes"
            node-key="id"
            :default-expanded-keys="expandedRoles"
            :props="defaultProps"
            show-checkbox
          />
</el-form-item>

方法1

2つの公式メソッドを使用して、getCheckedKeysは選択された子ノードのみを返し、getHalfCheckedKeysは選択された親ノードのみを返し、戻り値は選択された親ノードと子ノードを取得するためにスプライスされます。

var parentIds = this。$ refs.tree.getHalfCheckedKeys（）

var childsIds = this。$ refs.tree.getCheckedKeys（）

実際の測定：getCheckedKeysがfalseとして渡された場合、親ノードは返されません。

handleSubmit() {
      // getCheckedKeys 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组。
      // (leafOnly) 接收一个 boolean 类型的参数，若为 true 则仅返回被选中的叶子节点的 keys，默认值为 false
      var parentIds = this.$refs.tree.getHalfCheckedKeys()
      var childsIds = this.$refs.tree.getCheckedKeys()
      this.roleForm.menuIds = parentIds.concat(childsIds)
      if (this.dialogType === 'edit') {
        this.updateRole(this.roleForm)
      } else {
        this.addRole(this.roleForm)
      }
},


//谨慎点可以这样写
handleSubmit() {
      // getCheckedKeys 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组。
      // (leafOnly) 接收一个 boolean 类型的参数，若为 true 则仅返回被选中的叶子节点的 keys，默认值为 false
      var parentIds = this.$refs.tree.getHalfCheckedKeys()
      var childsIds = this.$refs.tree.getCheckedKeys(true)
      // 利用set没有重复的值这一特性, 实现数组去重。Array.form方法可以将 Set 结构转为数组。
      this.roleForm.menuIds = Array.from(new Set(parentIds.concat(childsIds)))
      if (this.dialogType === 'edit') {
        this.updateRole(this.roleForm)
      } else {
        this.addRole(this.roleForm)
      }
},

バグ

すべてを選択すると、getHalfCheckedKeysは親ノードを返しません。完全に選択されていない場合にのみ、親ノードが返されます。

方法2：最終的な実現

ソースコードは本当に変更したくないので、データを取得してから変更する必要があります。

getCheckedNodesを使用してノードを取得し、ループして内部のIDと親pidを取得して、繰り返される値を持つ配列を形成します。配列を使用して重複を削除できます。

handleSubmit() {
      // getCheckedKeys 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组。
      // (leafOnly) 接收一个 boolean 类型的参数，若为 true 则仅返回被选中的叶子节点的 keys，默认值为 false
      var checkedNodes = this.$refs.tree.getCheckedNodes(true)
      var menuIds = []
      checkedNodes.forEach(nodes => {
        menuIds.push(nodes.id,nodes.pid)
      })
      // 利用set没有重复的值这一特性, 实现数组去重。Array.form方法可以将 Set 结构转为数组。
      this.roleForm.menuIds = Array.from(new Set(menuIds))
      if (this.dialogType === 'edit') {
        this.updateRole(this.roleForm)
      } else {
        this.addRole(this.roleForm)
      }
}

注意

checkStrictly：親ノードと子ノードが関連していないかどうか、つまり、親が選択されている場合、すべての子ノードが自動的に選択されます。

バックエンドから返された親子データを取得してページをレンダリングするときは、関連付けられないことを期待しています。checkStrictly = true

ページがレンダリングされるときに、ユーザーに関連付けたいと思います。checkStrictly = false

handleEdit(scope) {
      this.dialogType = 'edit'
      this.dialogVisible = true
      this.checkStrictly = true
      this.roleForm = deepClone(scope.row.info)
      var menus = deepClone(scope.row.menus)
      var checkedRoles = []
      menus.forEach(item => {
        checkedRoles.push(item.id)
      })
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys(checkedRoles)
        this.expandedRoles = deepClone(checkedRoles)
        // set checked state of a node not affects its father and child nodes
        this.checkStrictly = false
      })
},

ElementUIツリーコントロールは、選択されたノード（親ノードを含む）を取得します

実装リファレンス

私の認識

ページ

方法1

バグ

方法2：最終的な実現

注意

おすすめ