vue + element 下拉框 选项绑定数据列表List,List动态变化后,下拉框下拉后数据不变化问题解决

17 篇文章 0 订阅
10 篇文章 0 订阅

原因很弱智,data中没有初始化,却直接使用,第一次对List赋值时没问题,下拉框能够找到数据,改变List中的值后,下拉框中的值不会跟着List而改变,找了一大圈,发现没有对List在data中进行初始化。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
这是一个基于VueElement组件库的虚拟列表下拉框实现。在这个下拉框,当列表项数量非常多时,只会渲染可视区域的部分,从而提高性能。 ```html <template> <el-select v-model="selected" placeholder="请选择" filterable remote :remote-method="loadOptions"> <template v-slot:default> <el-option v-for="item in visibleOptions" :key="item.value" :label="item.label" :value="item.value"></el-option> <el-option v-if="isLastPage" :key="'loading'" :label="'加载...'" disabled></el-option> </template> </el-select> </template> <script> export default { data() { return { options: [], // 所有选项 visibleOptions: [], // 可见选项 selected: undefined, // 当前选的值 pageSize: 10, // 每页显示的选项数量 currentPage: 1, // 当前页码 isLastPage: false // 是否已经加载完所有选项 }; }, methods: { async loadOptions(query) { // 模拟异步加载数据 await new Promise(resolve => setTimeout(resolve, 1000)); // 这里可以根据query参数从服务器获取数据 const data = Array.from({ length: 10000 }, (_, i) => ({ label: `选项${i + 1}`, value: i + 1 })); // 如果没有更多数据了,则标记为最后一页 if (data.length < this.pageSize) { this.isLastPage = true; } // 将新数据合并到原有数据 this.options = this.options.concat(data); // 更新可见选项 this.updateVisibleOptions(query); }, updateVisibleOptions(query) { const start = (this.currentPage - 1) * this.pageSize; const end = start + this.pageSize; this.visibleOptions = this.options.slice(start, end); // 如果没有匹配的选项,则跳转到第一页 if (query && this.visibleOptions.every(item => !item.label.includes(query))) { this.currentPage = 1; this.updateVisibleOptions(query); } } }, watch: { currentPage() { // 每次切换页码时更新可见选项 this.updateVisibleOptions(); } } }; </script> ``` 在这个实现,我们使用了`el-select`组件来实现下拉框,设置了`filterable`和`remote`属性来启用搜索和异步加载功能。每当用户输入查询关键字时,`loadOptions`方法就会被调用,该方法会模拟异步加载数据,并将新数据合并到`options`列表。同时,根据当前页码和每页显示的选项数量,计算出可见选项的范围,并将其赋值给`visibleOptions`属性。如果没有匹配的选项,则跳转到第一页。如果已经加载完所有选项,则将`isLastPage`属性标记为`true`,以便在可见选项列表显示“加载...”的提示。用户每次滚动列表时,会触发`loadOptions`方法,从而实现虚拟滚动的效果。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值