02-遇到的问题Vue控制多个下拉列表和问题duplicate attribute: @click

编程的时候想实现鼠标经过两个div的时候分别显示不同的下拉列表,在组件中设置了show:false和@mouseenter=“xxxShow”  @mouseleave=“xxxClose”,但是这时候当鼠标经过一个div的时候所有的下拉列表都会显示,在解决这个问题的时候我只想到了再设置两个函数xxxShow2和xxxClose2但是这样问题还没解决,我忘了再给一个show2:false属性来独立控制。

在把mouseenter和mouseleave都换成click时,报了一个错误duplicate attribute: @click重复的属性click,这时候我才想起来click不能两次调用,可以换成dblclick来解决。

完美的替代了jQuery

 

转载于:https://www.cnblogs.com/Romantic-Blood/p/11069476.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现一个多数据下列表,可以使用`el-select`结合`vue-virtual-scroll-list`来实现。下面是一个简单的示例代码: ```html <template> <div> <el-select v-model="selectedValue" placeholder="请选择" @visible-change="handleVisibleChange"> <vue-virtual-scroll-list :size="30" :remain="10" :bench="3" :items="options" :key-field="'value'" @scroll-to="scrollTo"> <el-option v-for="option in visibleOptions" :key="option.value" :label="option.label" :value="option.value"></el-option> </vue-virtual-scroll-list> </el-select> </div> </template> <script> import Vue from 'vue' import VueVirtualScrollList from 'vue-virtual-scroll-list' import { ElSelect, ElOption } from 'element-ui' Vue.use(VueVirtualScrollList) Vue.use(ElSelect) export default { components: { VueVirtualScrollList, ElSelect, ElOption }, data() { return { options: [], // 所有选项 visibleOptions: [], // 可见选项 selectedValue: null, // 已选中的值 lastScrollIndex: 0 // 上次滚动的索引 } }, mounted() { // 模拟获取数据 this.options = Array.from({ length: 10000 }).map((item, index) => ({ value: index, label: `选项${index}` })) }, methods: { handleVisibleChange(visible) { // 当下框展开时,初始化可见选项 if (visible) { this.visibleOptions = this.options.slice(0, 30) } }, scrollTo(index) { // 根据滚动的位置计算需要展示的可见选项 const startIndex = index > this.lastScrollIndex ? this.lastScrollIndex + 1 : index const endIndex = startIndex + 30 this.visibleOptions = this.options.slice(startIndex, endIndex) this.lastScrollIndex = index } } } </script> ``` 在上面的代码中,我们使用`vue-virtual-scroll-list`组件来实现虚拟滚动,并且在`el-select`中嵌套`vue-virtual-scroll-list`,通过`@visible-change`事件来初始化可见选项,通过`@scroll-to`事件来根据滚动位置计算需要展示的可见选项。最终实现了一个高性能的多数据下列表

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值