How iview Select Option uses 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"
      }  
    }

could you tell me how to write slot? This allows the drop-down to be selected, but it is still displayed in Select. Please select it manually. You must select it once manually to

.
May.22,2021

you need to define a label attribute, like this

<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>
The

select box will display the value of this label, which will lead to this situation if it is not defined.
if the content of the slot definition is more complex, Select component does not know what is expected to be displayed in the box when you want to select it. If all is displayed, there may be more content, resulting in some styles being confused, so you need to define a label to tell Select component what is displayed in the box.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3eb60-2c441.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3eb60-2c441.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?