学无先后,达者为师

网站首页 前端文档 正文

实现鼠标悬浮在Select选择器下拉选项上显示该项的其他信息

作者:Komorebi゛ 更新时间: 2022-01-07 前端文档

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

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

原文链接:https://blog.csdn.net/Komorebi_00/article/details/122106785

栏目分类
最近更新