홈>
이메일을 관리하기 위해 v-data-table을 사용합니다. 사용자가 행을 클릭하면 이메일 세부 정보가 포함 된 팝업이 나타납니다.
내가 갖고 싶은 것 :
이 행을 클릭 한 후 '읽기'(CSS 굵게/굵지 않음)로 표시된 행을 갖고 싶습니다.
문제 :
나는 이미 몇 가지 예를 발견했다 : Vuetify-방법 v-data-table에서 클릭시 행을 강조 표시
이 예제 (및 내가 찾은 다른 모든 예제)는 v-data-table에 확장 코드를 사용합니다 :
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template v-slot:items="props">
<tr @click="activerow(props.item)" :class="{'primary': props.item.id===selectedId}">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</tr>
</template>
</v-data-table>
확장 코드는
<template v-slot:items="props">
<tr @click="activerow(props.item)" :class="{'primary': props.item.id===selectedId}">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</tr>
</template>
항목을 표시 할 때이 코드 만 사용합니다.
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
</v-data-table>
확장 버전이 아닌 다른 예제 나 솔루션이 있습니까? vuetify 페이지에 그러한 공식적인 예가 없기 때문에 묻습니다.
- 답변 # 1
관련 자료
- vue.js - vuetify - 여러 값으로 v-data-table 검색?
- javascript - vuetify v-data-table에서 스트라이프 테이블을 어떻게 만듭니 까?
- vue.js - SortableJS 빈 Vuetify v-data-table이 작동하지 않습니다
- javascript : VUEJS에서 클릭 한 테이블 행을 어떻게 강조합니까?
- android - 클릭 후 ActionMenuView에서 메뉴 항목 강조 표시
- vue.js - 내 V- 데이터 테이블 Vuetify Vuex Axios API에 API를 추가하는 방법
- vba - 클릭하면 행을 강조 표시하고 Excel의 모든 탭에 코드를 적용하는 방법
관련 질문
- javascript : Safari에서 클릭 시 텍스트 선택 유지
- javascript : 다른 const와 동일한 속성을 사용하는 방법이 있습니까?
- javascript : 내 웹 개발 code를 처리하는 데 어려움이 있습니다.
- javascript : EventListener에서 JS 기본값을 깨는 함수 매개 변수
- javascript : RGB 값으로 회색 음영 얻기
- javascript : IE5와 IE11 모두에서 호환되는 불투명도를 구현하는 방법
- javascript : Vue로 파일 입력 클릭을 어떻게 처리합니까?
- javascript : 캔버스에서 버튼을 정렬하고 스타일을 지정하는 방법은 무엇입니까?
- javascript : 각도 클릭 이벤트가
- javascript : Mui V5 -TreeView 축소/확장 아이콘 및 TreeItem 들여쓰기 제거
selectRow
메소드를 추가했습니다 아이템을 받고isSelected
를 추가합니다. 그것에 재산. 그런 다음template
에서 나는 수업.primary
를 할당 품목에 재산isSelected
가있는 경우 .알림:이 방법은
isSelected
도 제거합니다 이전에 선택한 항목의 속성 그래서 오직 하나의<tr>
동시에 강조 될 수 있습니다.