当前位置: 首页 > news >正文

<el-select> :remote-method用法

el-select :remote-method用法

    • 说明
    • 代码实现
      • 单选
      • 多选

说明

在 Vue.js 中, 是 Element UI 库提供的一个下拉选择框组件。:remote-method 是 组件的一个属性,用于指定一个远程方法,该方法将在用户输入时被调用,以获取下拉列表的选项数据。
使用 :remote-method,你需要在 Vue 实例中定义一个方法,该方法将接收用户输入的关键词作为参数,并返回一个 Promise 对象,该 Promise 对象解析为包含选项数据的数组。

代码实现

单选

<template><div><el-select v-model="selectedOption" placeholder="请选择" :remote-method="loadOptions" :loading="isLoading"><el-optionv-for="option in options":key="option.value":label="option.label":value="option.value"></el-option></el-select></div>
</template><script>
export default {data() {return {selectedOption: null,options: [],isLoading: false};},methods: {loadOptions(query) {this.isLoading = true;// 在这里实现远程方法,返回一个 Promise 对象return new Promise((resolve, reject) => {// 模拟异步请求,这里应该是调用后端 API 获取数据setTimeout(() => {// 假设后端返回的数据格式为 { options: [{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }] }const response = {options: [{ value: '1', label: 'Option 1' },{ value: '2', label: 'Option 2' }]};resolve(response.options);this.isLoading = false;}, 1000);});}}
};
</script>

多选

实现多选功能,可以将 组件的 multiple 属性设置为 true,由于 multiple 属性被设置为 true,用户可以选择多个选项,selectedOptions 将会是一个数组,包含了所有被选中的选项的 value。

<template><div><el-select v-model="selectedOption" placeholder="请选择" :remote-method="loadOptions" :loading="isLoading" multiple><el-optionv-for="option in options":key="option.value":label="option.label":value="option.value"></el-option></el-select></div>
</template><script>
export default {data() {return {selectedOption: [],options: [],isLoading: false};},methods: {loadOptions(query) {this.isLoading = true;// 在这里实现远程方法,返回一个 Promise 对象return new Promise((resolve, reject) => {// 模拟异步请求,这里应该是调用后端 API 获取数据setTimeout(() => {// 假设后端返回的数据格式为 { options: [{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }] }const response = {options: [{ value: '1', label: 'Option 1' },{ value: '2', label: 'Option 2' }]};resolve(response.options);this.isLoading = false;}, 1000);});}}
};
http://www.lryc.cn/news/484455.html

相关文章:

  • CKA认证 | Day3 K8s管理应用生命周期(上)
  • JavaWeb——HTML、CSS
  • springboot如何获取控制层get和Post入参
  • 30 秒!用通义灵码画 SpaceX 星链发射流程图
  • 设计模式之组合模式(营销差异化人群发券,决策树引擎搭建场景)
  • 关于做完 C# 项目的问题总结
  • CSS响应式布局实现1920屏幕1rem等于100px
  • 根据当前浏览器版本,下载或更新驱动文件为对应的版本
  • 【轻量化】YOLOv10 更换骨干网络之 MobileNetv4 | 模块化加法!非 timm 包!
  • 人体存在感应器设置时间开启感应人存在开灯,失效
  • 2024年09月CCF-GESP编程能力等级认证Python编程二级真题解析
  • Vuex vs Pinia:新一代Vue状态管理方案对比
  • es查询报错:too_many_buckets_exception
  • outlook邮箱关闭垃圾邮件——PowerAutomate自动化任务
  • 机器学习(七)——集成学习(个体与集成、Boosting、Bagging、随机森林RF、结合策略、多样性增强、多样性度量、Python源码)
  • vue跳转传参
  • 初识Linux · 共享内存
  • Illumina测序什么时候会测序到接头序列?
  • Element表格show-overflow-tooltip属性
  • 蓝桥杯竞赛单片机组备赛【经验帖】
  • 解密复杂系统:理论、模型与案例(3)
  • <项目代码>YOLOv8 番茄识别<目标检测>
  • docker安装到D盘
  • 【Java语言】String类
  • 【go从零单排】Directories、Temporary Files and Directories目录和临时目录、临时文件
  • Diff 算法的误判
  • odoo 17 后端路由接口认证自定义
  • 租赁回收系统小程序
  • SQL 注入详解:原理、危害与防范措施
  • 如何用Java爬虫“采集”商品订单详情的编程旅程