要素の選択、カスタムコンテンツは、オプションのコンテンツの高さを超えて非表示にされ、スタイルを書き換えても（要素uiはオプションの高さを超えてカスタムコンテンツが非表示になっている）所望の効果を達成しなかった。

問題の説明

 <el-form-item label="デフォルト： " prop="category">
 <el-select
 v-model="FormInAddPopup.category"
 placeholder="を選択してほしい。
 >
 <el-option label="" value="">
 <span style=" float: left;"> </span>
 <span style="float: right;color: #8492a6;font-size: 13px;"
 > </span
 >
 </el-option>
 <el-option
 :label="popupTreeItem.label"
 :value="popupTreeItem.id"
 class="category_style"
 >
 <comn-tree
 :treeList="treeInPopup"
 @handleNodeClick="popupNodeClick"
 ></comn-tree>
 </el-option>
 </el-select>
 </el-form-item>

解決方法

1. ステップ1 を追加してください。:popper-append-to-body="false"
2. ス テ ッ プ 2 ： 設定す る 必要があ る カ レ ン ト オプシ ョ ン 要素を見つけ、 クラス名を与え、 高 さ を設定 し ます。

 <el-form-item label="デフォルト： " prop="category">
		<el-select
 v-model="FormInAddPopup.category"
 placeholder="を選択してほしい。
 :popper-append-to-body="false" //*** これが最初のステップだ。
 >
 <el-option label="" value="">
 <span style=" float: left;"> </span>
 <span style="float: right;color: #8492a6;font-size: 13px;"
 > </span
 >
 </el-option>
 <el-option
 :label="popupTreeItem.label"
 :value="popupTreeItem.id"
 class="category_style" // *** これが2番目のステップだ。
 >
 <comn-tree
 :treeList="treeInPopup"
 @handleNodeClick="popupNodeClick"
 ></comn-tree>
 </el-option>
 </el-select>
 </el-form-item> 
 
//*** cssスタイル
.category_style {
 height: 100px; // コンポーネント内のオリジナル・オプションの高さを上書きするように高さを設定する
 overflow: auto; // コンテンツがオーバーした、スクロールバーを表示する
 }

公式サイトの説明によると: セレクト コンポーネントの popper-append-to-body属性のデフォルトはtrueに、いくつかの位置決めの問題を引き起こす可能性があり、私は小さなヒントに 遭遇した問題を解決するためにそれを設定します： コードの内容にこだわらず、例えば、上記のコードもフォームがラップされ、jsの部分がないので、コンポーネントのカプセル化であり、詳細にそれを見る必要はありません。行の焦点を見て、ここでは発生した問題を記録するだけです。