Vue.js 使用Vue Split Panel和select border解决Vuetify的CSS问题以获得响应度

我有很多关于Vuetify的CSS问题，我希望有人能帮我解决。我将分割面板视图（vue分割面板）与Vuetify一起使用，但Vuetify似乎无法始终识别何时触发全列宽，如下所示。我可以通过打开然后关闭Chrome js控制台来“触发”整个列宽（对于相同的分割面板宽度）。 我把它放进了一个代码沙盒，这样它就可以复制了。这样做，我看到一个单选按钮没有显示的新问题

如果你能告诉我如何调整沙箱，使响应工作，我将非常感谢

应该是单选按钮：

此外，我无法在codesandbox中重现一个问题，但我在我的应用程序（它是JupyterLab的扩展）中遇到了这个问题，该问题显示在底部屏幕截图中：选择标签的边界线穿过它。我试图找出某个地方是否存在CSS冲突，但不知道应该在哪里查找。

此外，我也有一个问题，选择菜单的偏移量与左菜单成比例，出于某种原因。。。为什么打开左侧和顶部菜单会影响位置？我怎样才能修好它？我尝试过使用“attach”属性并向元素本身添加一个id，或者创建一个父div，但这两种方法似乎都不能解决这个问题。 这在沙箱中稍微重复，方法是将分割面板变宽并单击“多选”，然后将其变窄并再次单击。当菜单打开时，您将看到它是偏移的。

不涉及iFrame的解决方案将是首选，是的，我的应用程序使用

包装，但是由于它是JupyterLab扩展，我只能访问主选项卡空间（而不是左侧或顶部菜单），因此v-app围绕HTML元素包装，HTML元素是主选项卡区域，而不是全屏

---

我认为Vuetify代码中可能有一个bug围绕着这个函数：

我已经解决了所有CSS问题

通过在UI中添加适当的组件和细分来重构网格布局。添加了单选按钮的修复程序。添加了css依赖项、材质图标依赖项和vuetify内部使用的字体

在此处检查工作代码笔：

左面板
概率：
布尔值，可选（默认值=False）


导出默认值{
名称：“应用程序”，
数据（）{
返回{
参数：{
c:{default:1，selected:1}，
内核：{
默认值：“rbf”，
选定：“rbf”，
项目：[“线性”、“多边形”、“rbf”、“S形”、“预计算”]
},
度：{default:3，selected:3}，
coef0:{defaul:0.0，selected:0.0}，
概率：{default:true，selected:true}
}
};
}
};

谢谢！我知道你用了一个表格，我不知道。太糟糕了，常规电网系统不能处理这个问题。一个后续问题：你知道我如何在一行中制作正确/错误的单选按钮，并在其上方添加标签吗？当前（默认）行布局将单选按钮放置在标签右侧，但我希望它们位于标签下方的一行中。原因是，当我有一个单选按钮部分旁边的文本输入部分，我希望它是大致相同的高度。希望所有上述问题都得到解决，请分享悬赏点和投票这个答案。是的，可以将单选按钮放置在一行中，您也可以将标签置于底部。您介意与我分享如何将单选按钮放置在一行中，上面有标签，下面有提示吗？当然，我会在同一个沙箱中尝试并共享链接。此修复程序解决了您的单选问题吗

<template>
  <div id="app">
    <v-app>
      <Split style="height: 500px;">
        <SplitArea :size="25">panel left</SplitArea>
        <SplitArea :size="75">
          <v-container fluid grid-list-md>
             <v-layout row wrap>
              <v-flex class="d-flex" xs="12" sm="12" md="6" lg="4">
                <v-text-field
                  v-model="params.c.selected"
                  label="C"
                  hint="Penalty parameter C of the error term."
                  persistent-hint
                  return-object
                  type="number"
                  outlined
                ></v-text-field>
              </v-flex>
              <v-flex class="d-flex" sm="12" md="12" lg="6">
                <v-select
                  v-model="params.kernel.selected"
                  hint="Specifies the kernel type to be used in the algorithm. It must be one of ‘linear’, ‘poly’, ‘rbf’, ‘sigmoid’, ‘precomputed’ or a callable. If none is given, ‘rbf’ will be used. If a callable is given it is used to pre-compute the kernel matrix from data matrices; that matrix should be an array of shape (n_samples, n_samples)."
                  :items="params.kernel.items"
                  label="Kernel"
                  persistent-hint
                  return-object
                  outlined
                ></v-select>
              </v-flex>
              <v-flex class="d-flex" sm="12" md="12" lg="6">
                <v-text-field
                  v-model="params.degree.selected"
                  label="Degree"
                  hint="Degree of the polynomial kernel function ('poly'). Ignored by all other kernels."
                  persistent-hint
                  return-object
                  type="number"
                  outlined
                ></v-text-field>
              </v-flex>
              <v-flex class="d-flex" sm="12" md="12" lg="6">
                <v-text-field
                  v-model="params.coef0.selected"
                  label="Coef0"
                  hint="Independent term in kernel function. It is only significant in 'poly' and 'sigmoid'."
                  persistent-hint
                  type="number"
                  outlined
                ></v-text-field>
              </v-flex>
              <v-flex class="d-flex" sm="12" md="12" lg="6">
                <v-radio-group
                  v-model="params.probability.selected"
                  hint="Independent term in kernel function. It is only significant in 'poly' and 'sigmoid'."
                  persistent-hint
                >
                  <template v-slot:label>
                    <div style="font-size: 12px">
                      Probability:
                      boolean, optional (default=False)
                    </div>
                    <br>
                  </template>
                  <v-radio label="True" :value="true" color="black"></v-radio>
                  <v-radio label="False" :value="false" color="black"></v-radio>
                </v-radio-group>
              </v-flex>
            </v-layout>
          </v-container>
        </SplitArea>
      </Split>
    </v-app>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      params: {
        c: { default: 1, selected: 1 },
        kernel: {
          default: "rbf",
          selected: "rbf",
          items: ["linear", "poly", "rbf", "sigmoid", "precomputed"]
        },
        degree: { default: 3, selected: 3 },
        coef0: { defaul: 0.0, selected: 0.0 },
        probability: { default: true, selected: true }
      }
    };
  }
};
</script>

<style>
</style>