Css Vuetify：自动完成组件的自定义页脚

我需要使用Vuetify将一些底部固定元素添加到v-autocomplete组件的列表中，如下所示：

我尝试过使用append item槽并应用position:sticky，这样当用户滚动自动完成列表时，它会粘在底部。但是，这对IE11不起作用（我需要）：

我将无法为我的项目添加任何多边形填充，因此我尝试寻找另一个替代方案。到目前为止，我已经使用v-menu组件将自动完成和菜单附加到同一个div：

<div class="text-center">
    <v-menu content-class="menu" :attach="'.text-center'">
        <template v-slot:activator="{ on }">
            <v-autocomplete
                :attach="'.text-center'"
                class="autocomplete"
                :items="['something', 'something2']"
                color="primary"
                v-on="on"
                dark
            >
                Dropdown
            </v-autocomplete>
        </template>
        <div class="lower">
            Lower content
        </div>
    </v-menu>
</div>

下拉列表
低含量

当您第一次关注autocomplete组件时，它似乎工作得很好。但是，再次单击后，包含较低内容的菜单将被停用。此外，当单击自动完成最右边的部分时，只会显示包含自动完成项目的列表

---

当Autocomplete的列表执行此操作时，我需要切换较低的内容，或者添加此固定底部部分的任何其他选择。

您可以使用项目槽，看起来很难看，但确实有效，即使在IE11上：

<v-autocomplete 
  :items="[{ value: 'something' }, { value: 'something2' }, 'Lower content']"
>
  <template v-slot:item="data">
    <template v-if="typeof data.item === 'object'">
      <v-list-item-content v-text="data.item.value"></v-list-item-content>
    </template>
    <template v-else>
      <v-list-item-content v-text="data.item" class="red"></v-list-item-content>
    </template>
  </template>
</v-autocomplete>

有一个解决方案：

<div id="app">
  <v-app id="inspire">
    <div class="text-center">
      <v-menu content-class="menu" :attach="'.text-center'">
          <template v-slot:activator="{ on }">
            <v-autocomplete
              :attach="'.text-center'"
              class="autocomplete"
              :items="['something', 'something2']"
              color="primary"
              v-on="on"
              dark
            >
              <v-list-item
                slot="append-item"
                class="grey--text">
                {{ items.length }} elements
              </v-list-item>
            </v-autocomplete>
          </template>
      </v-menu>
    </div>
  </v-app>
</div>

{{items.length}}元素

谢谢您的回答。我在问题中提到，我已经尝试过了，其中包括菜单列表中的元素。但是，我需要它被附加到外面。对不起，我的错，我会改变答案，我保证它可以为IE11工作。关于内部或外部的问题，也许你可以通过CSS使它看起来像外部。我知道它在IE11上工作。不起作用的是粘性css属性。主要问题是使其处于外部。您希望如何处理较低的内容？当用户单击它时，您希望附加什么？您希望如何修复该项目？因为它是列表的最后一项，还是希望用户滚动时始终显示它？@DJ9114当用户单击它时，他将被重定向到另一个站点。我希望较低的内容不是列表的最后一项。Intsead，我需要将其附加到列表之外，以便用户可以滚动所述列表，并且始终显示较低的内容。仅当列表本身显示时，才应显示较低的内容，并且您希望它与其他内容一样可选择吗？@DJ9114不，我不希望它可选择。我需要能够把任何类型的内容放在那里。较低的内容和列表之间的唯一关系是它们需要一起显示和隐藏。谢谢你没有为我工作。当项目数增加时，较低的内容不可见。较低的内容只是作为列表的最后一项插入，而不是在列表之外