iview Select Option如何使用slot

Question

<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'
      }  
    }

请问下slot具体要怎么写才对呢？这样写能让下拉里面选中，但是Select里还是显示请选择，必须手动选择一次才对

Answer 1

你需要定义一个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框会显示这个label的值，如果不定义的话，就会导致你遇到的这种情况。
如果slot定义的内容较复杂，Select组件不知道你想选中的时候框里预期显示什么内容，如果全部显示可能会内容较多，导致一些样式乱掉，所以需要定义一个label去告诉Select组件框里显示什么。