如何将选择按钮放置在节目安排扩展面板的右侧？

Posted 2023-02-23

【中文标题】如何将选择按钮放置在节目安排扩展面板的右侧？

【英文标题】：How do I place the select button to the right of the show schedule expansion panel?

【发布时间】：2020-03-19 15:47:04

【问题描述】：

我的代码是这样的：

<div id="app">
  <v-app id="inspire">
    <v-btn class="success">Select</v-btn>
    <v-expansion-panels>
      <v-expansion-panel>
        <v-expansion-panel-header>Show Schedule</v-expansion-panel-header>
        <v-expansion-panel-content>
          <v-simple-table>
            <template v-slot:default>
              <tbody>
                <tr>
                  <td>Monday</td>
                  <td>10.00</td>
                </tr>
                <tr>
                  <td>Tuesday</td>
                  <td>20.00</td>
                </tr>
                <tr>
                  <td>Wednesday</td>
                  <td>15.00</td>
                </tr>
              </tbody>
            </template>
          </v-simple-table>
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-expansion-panels>
  </v-app>
</div>

我的代码笔是这样的：https://codepen.io/happyforever/pen/pooBYgV?editors=1010

所以当它在移动版打开时，它不会占用太多空间

我该怎么做？

更新：

我希望它看起来像这样：https://codepen.io/happyforever/pen/gOOJbpe?editors=1010

但如果用户点击显示时间表，我希望 cols 的变化从 cols = 8 到 cols = 12

在手机版中查看

我该怎么做？

【问题讨论】：

你需要澄清你的问题。

@ssc-hrep3 我更新了我的问题

@ssc-hrep3 我的问题是否清楚？

【参考方案1】：

您可以在移动版本中将列从 8 更改为 12。但是你需要使用 v-flex 来实现相同的而不是 v-cols

这是工作的代码笔： https://codepen.io/chansv/pen/jOOozoe?editors=1010

<div id="app">
  <v-app id="inspire">
    <v-row>
       <v-flex md8 xs12>
          <v-expansion-panels>
            <v-expansion-panel>
              <v-expansion-panel-header>Show Schedule</v-expansion-panel-header>
              <v-expansion-panel-content>
                <v-simple-table>
                  <template v-slot:default>
                    <tbody>
                      <tr>
                        <td>Monday</td>
                        <td>10.00</td>
                      </tr>
                      <tr>
                        <td>Tuesday</td>
                        <td>20.00</td>
                      </tr>
                      <tr>
                        <td>Wednesday</td>
                        <td>15.00</td>
                      </tr>
                    </tbody>
                  </template>
                </v-simple-table>
              </v-expansion-panel-content>
            </v-expansion-panel>
          </v-expansion-panels>
        </v-flex>
        <v-flex md4 xs6>
            <v-btn class="success">Select</v-btn>
         </v-flex>
     </v-row>
  </v-app>
</div>

new Vue(
  el: '#app',
  vuetify: new Vuetify(),

)