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"
>
<template 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-input v-model="note" label="Note" アウトライン></q-input>
<q-card-actions align="right">
<q-btn label="キャンセル" color="プライマリ"
@click="注をキャンセル">
</q-btn>
<q-btn label="メモを追加" color="primary"
@click="addStudentNote(selectedStudentRow)">
</q-btn>
</q-card-actions>
</q-form>
</q-card-section>
</qカード>
</q-ダイアログ>
</テンプレート>
<スクリプト>
デフォルトのエクスポート {
名前: 「学生テーブル」、
データ(){
戻る{
openStudentDialog: false、
}
}
計算結果: {
selectedStudentRow: {
得る() {
this.$store.getters.selectedStudentRow を返します;
}、
set(val) {
this.$store.commit('selectedStudentRow', val);
}
}
}、
</script></pre>
<p>希望のボタンをクリックするとモーダルが開き、テーブル内のチェックボックスがチェックされます。この画像で何を示したいのか</p>
<p>ボタンクリックイベントでprop.rowを送信してみました。しかし、うまくいきません。 </p>
リーリー
データをどこに「記録」しますか?
私の理解が正しければ、次のようなものを作成します:
リーリー似たようなこと