Vue+elementuiはドロップダウンテーブルの複数選択と検索機能を実現します

<el-フォーム 
:model="データフォーム" 
:rules="データルール" 
ref="データフォーム" 
@keyup.enter.native="dataFormSubmit()"
ラベル幅="120px" 
id="テーブルを選択" 
@click.native="クローズアップ">
<el-選択 
 v-model="dataForm.processDefinitionId" 
 placeholder="選択してください" 
 @change="handselect" 
 ref="選択"
 @click.native="deptogglePanel($event)" 
 複数 
 折りたたみタグ 
 サイズ="中">
  <el-オプション 
  v-for="(item,index) プロセス定義内" 
  :key="インデックス" 
  :label="アイテム名"
  :value="アイテムID">
  </el-option>
 </el-select>
 <div v-if="showTree" class="treeDiv" ref="tableList">
  <el-input placeholder="検索" 
  v-model="ss" 
  @input="手入力" 
  サイズ="中">
  </el-input>
  <el-テーブル 
  @select="ハンドル選択クリック" 
  @row-click="ハンドルリージョンノードクリック"
  @selection-change="ハンドル変更" 
  ref="moviesTable" :data="memberList" 境界
  :row-key="行キーを取得" 
  :cell-style="getCellStyle" 
  :header-cell-style="getHeaderCellStyle"
  @select-all="すべて選択">
   <el-テーブル列 
   タイプ="選択" 
   ヘッダーの位置合わせ="center" 
   align="center" 
   :reserve-selection="true"
   幅="50">
   </el-table-column>
   <el-テーブル列 
   v-for="(item, index) in Columns" 
   :key="インデックス" 
   :prop="アイテム.prop"
   :label="アイテム.ラベル" 
   :show-overflow-tooltip="true">
   </el-table-column>
 </el-table>
</div>
</el-form>

<スクリプト>
 エクスポートデフォルト{
  データ（） {
   戻る {
    ss: ''、
    表示: 偽、
    無効: false、
    データフォーム: {
     termName: '', //プロジェクト名processDefinitionId: []

    },
    データルール: {
     プロセス定義ID: [{
      必須: true、
      メッセージ:「ファイルを選択してください」
      トリガー: '変更'
     }],
     用語名: [{
      必須: true、
      メッセージ: 「プロジェクト名は空にできません」
      トリガー: 'ぼかし'
     }],
    },
    編曲: [],
    processDefinition: [], //プロセステンプレートのドロップダウンボックス memberList: [], //リスト
    表示ツリー: false、
    列: [{
      プロパティ: '数値'、
      ラベル: 'ファイルエンコーディング'
     },
     {
      プロパティ: '名前',
      ラベル: 'ファイル名'
     },
     {
      プロパティ: 'typename',
      ラベル: 'テンプレートタイプ'
     },
     {
      プロパティ: 'efilename',
      ラベル: 'ファイルタイプ'
     },
     {
      プロパティ: 'バージョン'、
      ラベル: 'バージョン'
     },
    ]、
    getRowKeys(行) {
     row.id を返します。
    },
    複数選択: [],
    isShowSelect: 真
   }
  },
  作成された() {},
  マウント() {
  },
  時計：
   isShowSelect(val) {
    // select に付属するドロップダウン ボックスを非表示にします。this.$refs.select.blur();
   },
  },
  メソッド: {
   初期化() {
    this.$nextTick(() => {
     this.$refs['dataForm'].resetFields();
     this.isDisabled = false;
     this.arr = [];
     this.multipleSelection = [];
    }).then(() => {
     //アーカイブファイルのドロップダウンボックス this.$axios.get("/term/getFileArchiveSelect").then((res) => {
      console.log('アーカイブファイルドロップダウンボックス:', res);
      （res.data.code != 200）の場合{
       this.memberList = []
      } それ以外 {
       this.processDefinition = res.data.page.list
       this.memberList = res.data.page.list // テーブルの割り当て}
     })
     if (!this.dataForm.id) {
      // 新規 // this.menuListTreeSetCurrentNode()
     } それ以外 {
      this.$axios.get("/term/getTermDeatil/" + this.dataForm.id).then((res) => {
       console.log("プロジェクトの詳細:", res);
       （res.data.code != 200）の場合{
        // this.$message.error(res.data.msg)
       } それ以外 {
        データを res.data.termResVO とします。
        if (data.fileArchiveIds != '') {
         this.dataForm.processDefinitionId = data.fileArchiveIds.split(',')
        } それ以外 {
         this.dataForm.processDefinitionId = []
        }
        this.multipleSelection = data.child;
        this.rowMultipleChecked(this.multipleSelection);
       }
      })
     }
    }).catch((エラー) => {
     コンソール.log(エラー);
    });
   },
   // テーブル CSS
   セルスタイルを取得する() {
    「text-align:center;」を返します
   },
   ヘッダーセルスタイルを取得します。
    「background: rgba(9, 37, 56,0.1);text-align:center; background: linear-gradient(to bottom,#ffffff 0,#eeeeee 100%);padding: 4px 5px;」を返します。
   },
   // 入力をクリックするとバブルが防止され、テーブルの表示と非表示が制御されます deptogglePanel(event) {
    this.isShowSelect = !this.isShowSelect; //元の選択ドロップダウンボックスイベントを非表示にする || (event = window.event)
    event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true)
    this.showTree ? this.tableHide() : this.tableShow()
   },
   //テーブルを表示する tableShow() {
    this.showTree = true
    document.addEventListener('click', this.tableHideList, false)
    this.rowMultipleChecked(this.multipleSelection);
   },
   //テーブルを非表示にする tableHide() {
    this.showTree = false
    document.addEventListener('click', this.tableHideList, false)
   },
   テーブルHideList(e) {
    (this.$refs.tableList && !this.$refs.tableList.contains(e.target)) の場合 {
     this.tableHide()
    }
   },
   // テーブルノードをクリック handleRegionNodeClick(data) {
    this.showTree = true
   },
   //複数選択 handleSelectClick(data) {
    this.showTree = true
   },
   //すべて選択 selectAll(data) {
    this.showTree = true
   },
   // 選択変更テーブル複数選択ボックス変更イベント handleChange(data){// テーブル内の選択された行 this.arr = [];
    for (let i in data) {
     this.arr.push(データ[i].id)
    }
    this.dataForm.processDefinitionId = this.arr; //割り当てを選択 this.multipleSelection = data; //確認してmultipleSelection配列に格納},
   //テーブル複数選択ボックス選択判定 rowMultipleChecked(multipleSelection) {
    console.log(複数選択)
    複数選択が null の場合
     (j = 0; j < multipleSelection.length; j++) の場合 {
      (i = 0 とします; i < this.memberList.length; i++) {
       if (multipleSelection[j].id == this.memberList[i].id){//バックエンドから送信された値にIDが存在する場合は、複数選択ボックスを選択します this.$nextTick(() =>{//必須 if (this.$refs.movi​​esTable != undefined) {
          this.$refs.movi​​esTable.toggleRowSelection(this.memberList[i], true);
         }
        })
       }
      }
     }
    }
   },
   //ファイルを削除します handselect(value){//Select はテーブルに関連付けられています let data = this.multipleSelection;
    arr = [] とします。
    if (value.length > 0){//multipleSelection 内の値を削除します (選択されたすべての値)
     (j = 0; j < data.length; j++) の場合 {
      （値のインデックスデータ[j].id）== -1の場合{
       データ.スプライス(j, 1)
      }
     }
     this.multipleSelection = データ
    } それ以外 {
     this.multipleSelection = [];
     データ = [];
    }
    for (let s in data) {
     arr.push(データ[s].id)
    }
    if (arr != null){//どの値をチェック解除する必要があるかを判断する必要があります (let i = 0; i < this.memberList.length; i++) {
      （arr.indexOf（this.memberList[i].id）== -1）の場合{
       this.$refs.movi​​esTable.toggleRowSelection(this.memberList[i], false);
      }
     }
    }
   },
   //検索 handinput() {
    コンソールにログ出力します。
    this.tableShow()
    this.$axios.get('/term/getFileArchiveSelect').then((res) => {
     コンソールログ(res);
     res.data.code != 200 の場合 {} そうでない場合 {
      this.processDefinition = res.data.page.list
      this.memberList = res.data.page.list
      console.log(メンバーリスト)
      resultData = this.memberList.filter(data => { とします。
       (data.number.indexOf(this.ss) != -1 || data.name.indexOf(this.ss) != -1 || の場合
        data.typename.indexOf(this.ss) != -1 || data.version.indexOf(this.ss) != -
        1 || data.efilename.indexOf(this.ss) != -1) { //判定条件を追加し続けることができます return true;
       }
      });
      this.memberList = 結果データ;
     }
    })
   },
   // フォーム送信 dataFormSubmit() {
    this.$refs['dataForm'].validate((valid) => {
     （有効）の場合{
      url = this.dataForm.id ? '/term/updateTerm' : '/term/addTerm' とします
      if (this.dataForm.id == '') {
       this.isDisabled = true;
      }
      this.dataForm.id = this.dataForm.id || 未定義;
      console.log(このデータフォーム);
     }
    })
   },
  },
 }
</スクリプト>

<スタイル>
 .applicaWord .el-upload-list__item .el-icon-close-tip {
  表示: なし !重要;
 }
 .treeDiv {
  位置: 絶対;
  上: 52px;
  左: -1px;
  zインデックス: 1000;
  幅: 100%;
  オーバーフロー:自動;
  最大高さ: 280px;
  /* 境界線: 1px 実線 #ccc; */
  境界線の半径: 6px;
  背景: #FFFFFF;
 }

 .treeDiv::-webkit-スクロールバー{
  /*全体的なスクロールバーのスタイル*/
  幅: 4px;
  /*高さと幅はそれぞれ水平スクロールバーと垂直スクロールバーのサイズに対応します*/
  高さ: 4px;
 }

 .treeDiv::-webkit-スクロールバー-サムネイル {
  /*スクロールバー内の小さな四角*/
  境界線の半径: 5px;
  -webkit-box-shadow: インセット 0 0 5px rgba(0, 0, 0, 0.2);
  背景: rgba(0, 0, 0, 0.2);
 }

 .treeDiv::-webkit-スクロールバートラック{
  /*スクロールバートラック*/
  -webkit-box-shadow: インセット 0 0 5px rgba(0, 0, 0, 0.2);
  境界線の半径: 0;
  背景: rgba(0, 0, 0, 0.1);
 }

 .treeDiv .el-table {
  フォントサイズ: 14px;
 }

 .treeDiv .el-table /deep/ td {
  パディング: 4px 0;
 }

 #selectTable .el-select {
  幅: 100%;
 }

 #selectTable .el-input {
  幅: 100%;
 }

 #kuan .el-form-item__content {
  幅: 80%;
 }
</スタイル>