多くの列があるテーブルで Vuetify TextField コンポーネントを使用しています。コンポーネントに含まれるコンテンツが多すぎて表示できない可能性があり、ユーザー エクスペリエンスの観点から、セルが多い場合、フィールド内をスクロールしてコンテンツを検査すると時間がかかりすぎます。

純粋な HTML の例

Vuetify の例

私の最初の考えは (もっと良いアイデアがある場合はお知らせください)、完全なコンテンツを表示するツールチップを表示することですが、コンポーネントが完全なコンテンツを表示できる場合、これは煩わしいでしょう。したがって、コンテンツが非表示または切り捨てられている場合にのみツールチップを表示したいと考えています。

では、コンポーネントが完全なコンテンツを表示しているか、それとも非表示または切り詰められたコンテンツがあるかを知る方法はあるのでしょうか? (テーブルのパフォーマンスは重要なので、値が変化したときに非常に複雑な計算を行う価値があるかどうかはわかりません)

やってみました

(遊び場)

<スクリプトのセットアップ> 'vue' から { ref, watch } をインポートします const フィールド = ref() const msg = ref( 「Hello World! このテキスト フィールド コンポーネントには表示できないコンテンツが多すぎます。」 ） const isCuttingOff = ref(false) 時計（ メッセージ、 () => { const inputWidth = field.value?.clientWidth const inputValueWidth = msg.value.length // !!! ここで入力値を測定します !!! console.log({ inputWidth, inputValueWidth }) isCuttingOff.value = inputWidth < inputValueWidth }、 {即時: true } ） 
      <テンプレート>
        
切断中です: {{ isCuttingOff }}
     

でも

• 起動時、変数 inputWidth は未定義です
• 変数 inputValueWidth
の計算方法がわかりません。