<p>열이 많은 테이블에서 Vuetify TextField 구성 요소를 사용하고 있습니다. 구성 요소에 표시할 콘텐츠가 너무 많이 포함되어 있을 수 있으며, 사용자 경험 관점에서 필드 내에서 스크롤하여 콘텐츠를 검사하는 데 셀이 많으면 시간이 너무 오래 걸릴 수 있습니다. </p> <p>순수한 HTML 예</p> <p>Vuetify 예</p> <p>제 첫 번째 아이디어(더 나은 아이디어가 있으면 알려주시기 바랍니다)는 전체 콘텐츠를 표시하는 도구 설명을 표시하는 것입니다. 그러나 구성 요소가 전체 콘텐츠를 표시할 수 있는 경우 이는 성가신 일이 될 것입니다. 그래서 콘텐츠가 숨겨지거나 잘릴 때만 툴팁을 표시하고 싶습니다. </p> <p>그렇다면 구성 요소가 전체 콘텐츠를 표시하고 있는지, 아니면 숨겨진/잘린 콘텐츠가 있는지 알 수 있는 방법이 있습니까? (테이블 성능이 중요하기 때문에 값이 변할 때 아주 복잡한 계산을 할 가치가 있는지 모르겠습니다.)</p> <p>해보았습니다</p> <p>(놀이터)</p> <pre class="brush:php;toolbar:false;"><스크립트 설정> 'vue'에서 { 심판, 시계 } 가져오기 const 필드 = ref() const 메시지 = 참조( 'Hello World! 이 텍스트 필드 구성요소에 표시할 내용이 너무 많습니다.' ) const isCuttingOff = ref(false) 보다( 메시지, () => const inputWidth = field.value?.clientWidth const inputValueWidth = msg.value.length // !!! 여기서 입력값을 측정합니다 !!! console.log({ inputWidth, inputValueWidth }) isCuttingOff.value = inputWidth < }, { 즉시: 사실 } ) </스크립트> <템플릿> <v-앱> <div class="text-h3">잘림: {{ isCuttingOff }}</div> <v-컨테이너 클래스="w-25"> <v-text-field ref="필드" label="fsfdsf" v-model="msg" /> </v-컨테이너> </v-앱> </템플릿></pre> <p>하지만</p>

• 시작 시 inputWidth 변수는 정의되지 않습니다.
<li>변수 <code>inputValueWidth</code></li>를 계산하는 방법을 모르겠습니다.