要素ツリーリストは、子ノードと親ノードを同時に選択し、エコーを実現します

まず、要素のツリーコントロールを呼び出します。

  <el-tree
                  :data="dataTree"
                  ref="tree"
                  :props="props"
                  accordion
                  show-checkbox
                  node-key="id"
                  updateKeyChildren=""
                  @check-change="handleCheckChange"
                >
                </el-tree>

次に、@ check-changeイベントを使用して、ノードの選択された状態が変化したときにコールバックを取得します

    // 树形方法_复选框
    handleCheckChange(data) {
    
    
      console.log(data)
      debugger;
      // 选中当前子节点以及父节点
      let res = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
      console.log(res)
    }

ここで返されるresは、クリックした子ノードと、親ノードが変更されたときのコールバックです。

エコーの実現は
最初にボタンを与えます

    <el-button
                    type="text"
                    size="small"
                    @click="updateHandle(scope.row)"
                  >

scope.rowを介してこの行のコンテンツを取得してから、既に持っているアクセス許可IDを取得します

  updateHandle(data) {
    
    
      console.log(data);
      // window.location.reload()
      if (data.menuIds) {
    
    
        var tempArr = data.menuIds.split(",");  //用,分割
        this.defaultCheck = tempArr;			//创建一个空数组来接受tempArr
        this.$refs.tree.setCheckedKeys(this.defaultCheck)    	//实现回显
        // this.defaultCheck = Object.assign([], this.defaultCheck, tempArr);
      }
    },

おすすめ

転載: blog.csdn.net/wsxDream/article/details/111224468