鍍金池/ 問答/HTML/ iview Select Option如何使用slot

iview Select Option如何使用slot

<Select v-model="scoreQuType" style="width:200px">
      <Option value="4">
        <div slot>NewYork</div>
      </Option>
      <Option value="shanghai">London</Option>
      <Option value="shenzhen">Sydney</Option>
    </Select>
    
    data () {
      return {
        scoreQuType: '4'
      }  
    }

請(qǐng)問下slot具體要怎么寫才對(duì)呢？這樣寫能讓下拉里面選中，但是Select里還是顯示請(qǐng)選擇，必須手動(dòng)選擇一次才對(duì)

回答
編輯回答
練命

你需要定義一個(gè)label屬性，像這樣

<template>
    <div>
        <Select v-model="scoreQuType" style="width:200px">
            <Option value="4" label="NewYork">
                <div slot>NewYork</div>
            </Option>
            <Option value="shanghai">London</Option>
            <Option value="shenzhen">Sydney</Option>
        </Select>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                scoreQuType: '4'
            }
        },
        mounted(){
            console.log(this.scoreQuType)
        }
    }

</script>

select框會(huì)顯示這個(gè)label的值，如果不定義的話，就會(huì)導(dǎo)致你遇到的這種情況。
如果slot定義的內(nèi)容較復(fù)雜，Select組件不知道你想選中的時(shí)候框里預(yù)期顯示什么內(nèi)容，如果全部顯示可能會(huì)內(nèi)容較多，導(dǎo)致一些樣式亂掉，所以需要定義一個(gè)label去告訴Select組件框里顯示什么。

2018年8月9日 13:21