el-select实现鼠标悬浮在下拉选项上显示该项的其他信息

使用 @mouseover.native 实现鼠标悬浮在下拉选项上显示该项的地址信息

<el-select v-model="value" filterable placeholder="请选择">
    <el-option 
        v-for="item in options"
        :key="item.id"
        :label="item.name"
        :value="item.id"
        @mouseover.native="showAddress(item.id,item.address)"
    >
        <span>{{item.name}}span>
        <span v-show="addressId === item.id" style="margin-left:20px;">{{address}}span>
    el-option>
el-select>
data() {
    return {
        addressId: '',
        addressName: ''
    }
}
methods: {
    showAddress(id,val) {
        this.addressId = id
        this.addressName = val
    }
}

你可能感兴趣的:(Element-UI,elementui,vue)