将类添加到Vuetify的v-select组件的第一项

Question

我正在使用v-select component from Vuetify，并且我想向v-select组件的第一项添加一个类，例如，使第一项“ Item A”的文本显示为红色。

项目列表似乎以某种方式自动生成，我不知道如何访问单个项目。

我有这个：

<v-select
    v-model="selected"
    :items="items"
    chips
    label="Some Items"
    multiple
    outlined
    cache-items
></v-select>

是否有可能使第一个条目“ Item A”显示为红色，并且如何显示？

感谢您的帮助！

Answer 1

如果第一个项目不是真正的项目，例如全选，则可以使用class Card: def __init__(self, figure, colour): self.colour = colour self.figure = figure def __repr__(self): return str(self.figure) + str(self.colour) class Deck: def __init__(self): self.deck = [] def createDeck(self): for colour in ["h", "d", "c", "s"]: for figure in ["2", "3", "4", "5", "6", "7", "8", "9", "T", "J", "Q", "K", "A"]: self.deck.append(Card(figure, colour)) class Table(): def __init__(self): self.onTheTable = [] def howManyCards(self, num): self.onTheTable = Deck.deck[:num] deck = Deck() deck.createDeck() table = Table() table.howManyCards(10) 插槽来实现。参见https://vuetifyjs.com/en/components/selects#prepend-append-item-slots。

要仅使第一项变为红色，可以使用/** Get Low level client from High level client. You can defined it directly as Low level: RestClient lowLevelClient = RestClient.builder( new HttpHost("localhost", 9200, "http"), new HttpHost("localhost", 9201, "http")).build(); */ RestClient lowLevelClient = client.getLowLevelClient(); List<String> indexList = new LinkedList<>(); // Request from _cat/indices. You can change 'h' flags for receiving additional index parameters Response response = lowLevelClient.performRequest(new Request("GET", "/_cat/indices?h=index&format=json")); // parse the JSON response List<Map<String, String>> listOfIndicesFromEs = null; if (response != null) { String rawBody = EntityUtils.toString(response.getEntity()); TypeReference<List<HashMap<String, String>>> typeRef = new TypeReference<List<HashMap<String, String>>>() { }; listOfIndicesFromEs = mapper.readValue(rawBody, typeRef); } // get the index names if (listOfIndicesFromEs != null) { indexList = listOfIndicesFromEs.stream() .map(index -> index.get("index")) .collect(Collectors.toList()); } return indexList; 选择器。可以使用prepend-item来设置:first-child，以向菜单本身添加合适的CSS类。

此示例演示了这两种技术：

content-class

menu-props

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
  data () {
    return {
      items: ['Item A', 'Item B', 'Item C'],
      selected1: [],
      selected2: []
    }
  }
})

或者，.red-text { color: red; } .red-first-item .v-list-item:first-child .v-list-item__title { color: red; }槽可用于自定义所有项目的外观。但是，这有点复杂，可能只是为了使一件商品变红色就过分了。

我建议对源代码进行浏览：

https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VSelect/VSelect.ts

您是否了解所有内容都无所谓，您仍然可以了解组件的组装方式以及如何构建菜单。