如何将 Vuetify 对话框标题的位置固定到顶部并使按钮始终可见答案

【问题标题】：How to Fix the position of Vuetify Dialog Title to the top and make buttons always visible如何将 Vuetify 对话框标题的位置固定到顶部并使按钮始终可见
【发布时间】：2019-09-20 23:52:12
【问题描述】：

我试图在滚动时将 Vuetify 对话框标题和内容的标题固定在顶部。我使用了“样式：”位置：固定“。当我滚动时，标题和标题不在视图中。当前代码如下所示

    <v-layout row wrap  >
         <v-flex class="text-xs-center">
             <v-dialog v-model="isDialogTips" max-width=800>
                <v-card>
                    <v-card-title
                    class="text-xs-center justify-center primary title white--text darken-2 font-weight-bold">
                    {{dialogTipsHeading}}</v-card-title>
                   
                        <!-- Displaying Tips matrix Headers-->
                    <v-layout 
                        v-if="dialogTableOn"
                        row wrap
                        class="text-xs-center mx-auto pt-2 justify-space-between  teal--text darken-4 "
                        style="width:600px;"
                        >

                        ....
                        Table Headers
                        ....

                    </v-layout>

                    ....
                    some Table of content
                    ....
                    
                    <!-- Diplaying dialog buttons -->
                        <v-layout 
                         >
                          <v-card-actions
                          class="text-xs-center mx-auto justify-space-around">
                              <v-btn  v-if="dialogTipsBtn1"  class="align-content-center d-flex mx-auto" dark color="red darken-4 font-weight-bold" text @click="clearDialog('no')">{{dialogTipsBtn1}}</v-btn>
                              <v-btn  v-if="dialogTipsBtn2" class="align-content-center d-flex mx-auto font-weight-bold" dark color="green darken-4" text @click="clearDialog('yes')">{{dialogTipsBtn2}}</v-btn>
                          </v-card-actions>

                      </v-layout>

                  </v-card>
            </v-dialog>
         </v-flex>

    </v-layout>

这里是调用对话框的函数

handleDialog()
{
  this.dialogTipsHeading = "Roughness Parameters of Transportation channel Materials"
  
  this.dialogTipsBtn1 = ""
  this.dialogTipsBtn2 = "OK"
  this.dialogTableOn = true,
  this.isDialogTips = true
 }

我得到的结果是这样的

请建议一种将内容（标题和表格标题）固定在顶部并滚动表格内容的方法。另外，有没有办法让操作按钮始终可见？

提前谢谢你！

【问题讨论】：

这对我有帮助。谢谢分享

标签： javascript vue.js dialog vuetify.js

【解决方案1】：

最后，我自己修好了

它是关于在“v-dialog”组件中添加一个“可滚动”道具，然后设置“v-card-text”组件的高度

<v-dialog scrollable v-model = "isDialogTips"
    max-width = 800 >

  ....
  code (title/heading/headers)
  ...

  <v-card-text
  style = "height: 600px;" >
    ....
    code
    .... 
  </v-card-text>

</v-dialog>

现在，所希望的结果如下所示。标题和标题位于顶部，按钮始终在底部可见。

【讨论】：