Vue.js 在Vuetify中的datatable内生成动态模式/对话框

我有一个数据表，有很多列。我只想在datatable中显示几列，当用户单击行中的“更多”链接时，在模式/对话框中显示其余数据

下面是我的模板

<v-data-table :headers="tableHeaders" :items="creditCardTransactions">
    <template v-slot:item.moreInfo="{ item }">
        <v-icon @click.stop="$set(dialogNote, item.id, true)">mdi-information</v-icon>
        <v-dialog v-model="dialogNote[item.id]" :key="item.id">
            <v-card>
                <v-card-title>
                    <span>More Info</span>
                </v-card-title>
                <v-card-text>
                    <v-simple-table>
                        <template v-slot:default>
                            <tr>
                                <th width="25%">Column A</th>
                                <td>{{ item.ColumnA }}</td>
                            </tr>
                            <tr>
                                <th width="25%">Column B</th>
                                <td>{{ item.ColumnB }}</td>
                            </tr>
                        </template>
                    </v-simple-table>
                </v-card-text>
                <v-card-actions>
                    <v-btn color="primary" @click.stop="$set(dialogNote, item.id, false)">Close</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </template>
</v-data-table>

问题是，这会为datatable上的每一行生成一个模式/对话框，这意味着页面上有多余的HTML代码行，这意味着页面速度慢

问题是，我怎样才能拥有一个模态/对话框并重用它？例如，页面上只有一个模式，当在该行上单击“更多”按钮时，模式的内容会发生变化，反映出该行？

<v-data-table>
... contents
  <v-btn @click="showDialog(item)">Show More</v-btn>
</v-data-table>

<v-dialog v-model="show">
... dialog content
... currentDialogItem
</v-dialog>

//scripts
export default {
  data(){
    return { 
       show: false,
       currentDialogItem: {}
    }
  },
  methods:{
    showDialog(item){
      this.show = true;
      this.currentDialogItem = item;
    }
  }
}

... 目录
显示更多
... 对话内容
... currentDialogItem
//剧本
导出默认值{
数据（）{
返回{
秀:假,，
currentDialogItem:{}
}
},
方法：{
显示对话框（项目）{
this.show=true；
this.currentDialogItem=项目；
}
}
}

好的，您可以从v-data-table中创建v-dialog，在表中只需将方法添加到按钮，即可将数据表项传递到对话框中。 因此：

添加新数据，并用该数据替换对话框v-model，例如

v-model=“selectedDialogNote”

添加新方法，将数据表项传递到

selectedDialogNote

将对话框移出表，并将方法添加到表中的按钮

因此，只有一个对话框和一个带有按钮的大表有一种方法

<v-data-table>
... contents
  <v-btn @click="showDialog(item)">Show More</v-btn>
</v-data-table>

<v-dialog v-model="show">
... dialog content
... currentDialogItem
</v-dialog>

//scripts
export default {
  data(){
    return { 
       show: false,
       currentDialogItem: {}
    }
  },
  methods:{
    showDialog(item){
      this.show = true;
      this.currentDialogItem = item;
    }
  }
}