要素ツリーコントロールは、ドロップダウンメニューとアイコンを統合します（ツリー+ドロップダウン+入力）

<el-col :span="4" :xs="24">
   <!--ディレクトリ検索機能-->
  <div class="head-container">
    <el-入力
      v-model="dirNameCn"
      placeholder="ディレクトリ名を入力してください"
      クリア可能
      サイズ="小"
      プレフィックスアイコン="el-icon-search"
      スタイル="マージンボトム: 20px"
    />
  </div>
  <!--ツリー表示-->
  <div class="head-container">
    <el-tree
      :data="dirTreeオプション"
      :props="デフォルトプロパティ"
      :クリック時にノードを展開="false"
      :filter-node-method="filterNode"
      ref="木"
      デフォルトすべて展開
      @node-click="ハンドルNodeClick"
      icon-class="el-icon-folder-opened"
      ノードキー="id"
      :クリック時にチェックするノード="true"
    >
      <!-- 非表示の新しいアイコン -->
      <span class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
        <span>{{ ノード.ラベル }}</span>
        <div>
          <i v-show="data.show" class="el-icon-circle-plus" style="color: #00afff" @click="addDial(node, data)"/>
          <!--非表示のドロップダウン選択-->
          <el-dropdown トリガー="クリック" 配置="右" @command="(コマンド) => {handleCommand(コマンド)}">
            <i v-show="data.show" class="el-icon-more" style="color: #D3D3D3"/>
            <el-dropdown-menu slot="ドロップダウン">
              <el-dropdown-item command="a">名前の変更</el-dropdown-item>
              <el-dropdown-item command="b">削除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </span>
    </el-tree>
  </div>
</el-col>

<スクリプト>
  エクスポートデフォルト{
    名前: 'reqmdoctree',
    データ（） {
      戻る {
        // 左の検索ボックスの内容 dirNameCn: '',
       	// ディレクトリツリーオプション dirTreeOptions: undefined,
        デフォルトプロパティ: {
          子供: 「子供」、
          ラベル: "ラベル"
        },
        //ツリーメニューに子ノードがあるかどうか yesChild: undefined,
        // 左側に新しく追加されたプロンプト情報ボックスを制御する show: 0,
        // クエリ要件ドキュメント情報パラメータ queryParams: {
          docNo: undefined, // 文書番号 docNameEn: undefined, // 文書の英語名 dirNo: undefined, // ディレクトリ番号 current: 1, // 現在のページ サイズ: 20 // ページあたりに表示される項目数 },
        ツリーID: 未定義、
      }
    },
    メソッド: {
      /** 必要なディレクトリのドロップダウンツリー構造を照会します*/
      getTreeSelect() {
        treeselect().then(応答 => {
          this.dirTreeOptions = レスポンス.データ
        })
      },
      // 検索値はフィルターです function filterNode(value, data) {
        if (!value) が true を返す
        data.label.indexOf(値) !== -1 を返します
      },
      // ノードがクリックされたときのコールバック関数 handleNodeClick(data) {
        // コンソール.log(データ)
        this.treeId = データID
        this.yesChild = data.children
        this.queryParams.dirNo = データ ID
        このリストを取得する()
      },
      //ツリー内の3つのポイントのイベント handleCommand(command) {
        if (コマンド == 'a') {
          selectReqNo(this.treeId).then(応答 => {
            this.uuid = 応答.msg
            getObjTree(response.msg).then(response => {
              this.form = レスポンスデータ
              this.open = true
              this.title = '要件ドキュメントディレクトリ構成テーブルを変更する'
            })
          })
        }
        if (コマンド == 'b') {
          if (this.yesChild != 未定義) {
            this.$notify.error({
              タイトル: 「警告」
              メッセージ: 「このディレクトリには他のフォルダがあります」
            })
          } それ以外 {
            selectReqNo(this.treeId).then(応答 => {
              this.uuid = 応答.msg
              this.$confirm('ID ' + this.uuid + ' のデータ項目を削除してもよろしいですか?', '警告', {
                confirmButtonText: '確認'、
                cancelButtonText: 'キャンセル'、
                タイプ: '警告'
              }）。そして（）=>{
                delObjTree(this.uuid) を返します
              }）。次に、データ => {
                この.getTreeSelect()
                this.msgSuccess('正常に削除されました')
              }).catch(関数() {
              })
            })
          }
        }
      },
      // 左側に新しいディレクトリ/ファイルを作成する addDial(node, data) {
        // console.log(ノード、'---'、データ)
        this.reset()
        this.form.dirParentId = データ.id
        this.open = true
        this.title = '要件ドキュメントディレクトリ構成テーブルを追加する'
      },
      // マウスを左に置いたときにアイコンを表示する mouseenter(data){
        this.$set(データ、'表示'、true)
      },
      // マウスの左ボタンが離れるとアイコンは表示されません。mouseleave(data){
        this.$set(データ、'表示'、false)
      },
      //ここで新しいリソースのポップアップ ウィンドウを開きます......
    }
  }
</スクリプト>