フォーム項目ラベルとフォーム項目コンテンツを el-form-item でラップする方法

elemnet ui の el-form-item のフォーム項目ラベルとフォーム項目コンテンツは、デフォルトでは本来同じ行に表示されます。フォーム項目ラベルとフォーム項目コンテンツを el-form-item でラップするにはどうすればよいですか?
効果は次のとおりです。
ここに画像の説明を挿入
方法 1:
elemnetUI 公式メソッド label-position="top"
ここに画像の説明を挿入

方法 2:
アイデア: el-form または el-form-item の label-width 属性を削除するか、0 に設定します。ラベルの長さが 1 行を超える場合は、次のスタイル属性を設定する必要があります。次のスタイル コードを追加します

<style scoped>
/deep/ .el-form-item__label{
    
    
  text-align:left;
  float: none;
  word-break: break-word;
}
</style>

おすすめ

転載: blog.csdn.net/Hyanl/article/details/128343983