小编db3*_*000的帖子

更改 vuetify v-expansion-panel-content 的填充

我有多个层叠的 v 扩展面板来可视化文件夹结构。就像这个例子中的 items 和 innerItems

  <v-expansion-panels
     accordion
     focusable
  >
     <v-expansion-panel
        v-for="(item, x) in items"
        :key="x"
     >
        <v-expansion-panel-header> {{ item.header }}</v-expansion-panel-header>
        <v-expansion-panel-content class="v-expansion-panel-content">
           <v-expansion-panels>
             <v-expansion-panel
                v-for="(innerItem, y) in innerItems"
                :key="y"
             >
                <v-expansion-panel-header> {{ innerItem.header }} </v-expansion-panel-header>
                <v-expansion-panel-content> {{ innerItem.content }} </v-expansion-panel-content>
               </v-expansion-panel>
            </v-expansion-panels>
        </v-expansion-panel-content>
     </v-expansion-panel>
  </v-expansion-panels>
Run Code Online (Sandbox Code Playgroud)

所以我明白了

在此处输入图片说明

但我需要内部扩展面板像这样在右侧

在此处输入图片说明

我通过在浏览器编辑器中编辑 .v-expansion-panel-content__warp 来实现这一点(只是为了得到我想要的样子)但是我怎样才能访问这个自生成的 div/css-class

在此处输入图片说明

已经有一个关于面板标题(Stylization vuetify 组件 v-expansion-panel__header)的问题,但我没有得到这个问题或答案......

也许有人可以指出我正确的方向或遇到了同样的问题,并且可以告诉我解决这个问题的方法!

谢谢!

css vue.js vuetify.js

4
推荐指数
2
解决办法
2917
查看次数

标签 统计

css ×1

vue.js ×1

vuetify.js ×1