Vuetify v-select 設定 width 要寫在外面的自訂 css, 而且外面要有一個 <div>

·

1 min read

今天問了 chatGPT, 但他給的答案都沒有 div, 沒有效果。
原生的 select 用 css 設定 width 卻就可以: https://jsfiddle.net/sunpochin/dLbqe8f0/2/

直到我看到這篇,偶然的加上 div, 才發現 width 神奇的改變了。
https://stackoverflow.com/a/71231747/720276

做個筆記免得自己忘記,要寫成下面這樣。

<template>
      <div class="custom-width">
        <v-select
          label="Filter by Region"
          :items="[
            'Africa',
            'Americas',
            'Asia',
            'Europe',
            'Oceania',
            'Antarctica',
          ]"
          variant="outlined"
        />
      </div>
</template>

<style lang="scss" scoped>
.custom-width {
  width: 600px; /* 使用 CSS 自訂寬度 */
}
</style>