Vue.js를 사용하여 버튼을 통해 q-table의 행 선택
P粉384679266
2023-09-02 16:25:14
<p><code>q-table</code>의 작업 버튼에 있는 편집 버튼을 누르면 버튼이 모달을 엽니다. 그런데 <code>q-table</code>의 확인란을 선택할 수 없으므로 스키마를 업데이트하려고 하면 오류가 발생합니다. 내가 원하는 것은 작업 버튼을 클릭하면 테이블에서 내가 행을 선택했음을 감지하는 것입니다. </p>
<p>내 테이블:</p>
<pre class="brush:php;toolbar:false;"><템플릿>
<q-테이블
title="학생"
:filter="필터"
:rows="학생데이터"
:columns="열"
행 키 = "id"
밀집한
선택="싱글"
class="푹신한 그림자 둥근 q-pa-lg 학생 테이블"
v-model:selected="selectedStudentRow"
>
<템플릿 v-slot:body-cell-actions="props">
<q-td :props="props">
<q-btn class="action-btn" color="green" icon="mdi-pen" @click="openStudentDialog = true;>
</q-td>
</템플릿>
</q-테이블>
<q-dialog v-model="addStudentNoteDialog" class="add-student-note-dialog">
<q-카드>
<q-카드 섹션>
<q-형식>
<q-input v-model="note" label="설명된 "Note"></q-input>
<q-card-actions align="right">
<q-btn label="취소" color="기본"
@click="CancelNote">
</q-btn>
<q-btn label="메모 추가" color="기본"
@click="addStudentNote(selectedStudentRow)">
</q-btn>
</q-카드-액션>
</q-form>
</q-카드 섹션>
</q-카드>
</q-대화상자>
</템플릿>
<스크립트>
기본값 내보내기 {
이름: "StudentsTable",
데이터(){
반품{
openStudentDialog: 거짓,
}
}
계산됨: {
selectedStudentRow: {
얻다() {
this.$store.getters.selectedStudentRow를 반환합니다.
},
세트(발) {
this.$store.commit('selectedStudentRow', val);
}
}
},
<p>원하는 버튼을 클릭하면 모달이 열리고 표에서 체크박스가 체크됩니다.이 이미지에서 무엇을 보여주고 싶은가요</p>
<p>버튼 클릭 이벤트에 prop.row를 보내려고 했습니다. 하지만 작동하지 않습니다. </p>
으아악
데이터를 어디에 "로그"합니까?
내가 올바르게 이해했다면 다음과 같은 것을 만들 것입니다:
으아악비슷한 것