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

el-select下拉框 change事件返回该项所有数据

 主要代码 value-key

<template><div><el-selectv-model="value"value-key="label"placeholder="请选择"@change="selectChange"><el-optionv-for="item in options":key="item.label":label="item.label":value="item"></el-option></el-select></div>
</template><script>
export default {data() {return {options: [{value: "选项1",label: "黄金糕",},{value: "选项2",label: "双皮奶",},{value: "选项3",label: "蚵仔煎",},{value: "选项4",label: "龙须面",},{value: "选项5",label: "北京烤鸭",},],value: "",};},mounted() {},methods: {selectChange(item) {console.log(item);},},
};
</script><style scoped></style>

 以下暂时自行理解,需与后端对接(有时间在整理)。。。。。

1. input 远程搜索
 <el-autocompletestyle="width: 100%"v-model="form.ENTNAME":fetch-suggestions="querySearchAsync"placeholder="企业名称"@select="handleSelect"clearablevalue-key="ENTAME"></el-autocomplete>querySearchAsync(query, callBack) {if (query!== "") {this.$http.post("/system/ssoloin/getUrlataMap", {method: "getEntByword",token: getToken(),mapData: { type: "0", keyword: query},}).then((res) => {callBack(res.data.data.RESULTDATA);});}},handleSelect(item) {this.$http.post("/syem/ssolon/getUrltap", {method: "getRegistnfo",token: getToken(),mapData: { type: "0", keyWord: item.ENTNAME },}).then((res) => {this.form = res.data.data.RESTDATA[0];});},

 2. select 远程搜索

<el-selectv-model="form.ENTNAME"filterableremotereserve-keywordplaceholder="请输入企业名称":remote-method="remoteMethod":loading="loading"style="width: 100%"@change="selectChange"><el-optionv-for="(item, index) in options":key="index":label="item.ENTNAME":value="item.ENTNAME"></el-option></el-select>remoteMethod(query) {if (query !== "") {this.loading = true;this.$http.post("/syst/ssgin/getUrlaMap", {method: "getEyKeyord",token: getToken(),mapData: { type: "0", keyword: query },}).then((res) => {this.loading = false;this.options = res.data.data.RESUDTA;});} else {this.options = [];}},selectChange(value) {this.$http.post("/syem/ssogin/getUrlDaMap", {method: "getRegierInfo",token: getToken(),mapData: { type: "0", keyWord: value},}).then((res) => {this.form = res.data.data.RESULATA[0];});},

http://www.lryc.cn/news/275213.html

相关文章:

  • MySQL基础篇(一)SQL
  • 多类指针式仪表自动读数系统的LabVIEW开发应用案例
  • 攀登者2 - 华为OD统一考试
  • 归并排序例题——逆序对的数量
  • 数据库连接使用问题 - 1
  • 【已解决】You have an error in your SQL syntax
  • 如何在Ubuntu安装SVN服务并结合cpolar实现公网TCP地址远程访问本地服务
  • windows监控进程是否还活着,查看内存使用率
  • C#-词法结构
  • GitHub pull request(傻瓜式入门版)
  • Studio 3T客户端连接Mongodb数据库服务
  • 算法每日一题:赎金信 | 字符和整数
  • 数字孪生在虚拟现实(VR)中的应用
  • iOS实时查看App运行日志
  • 论文阅读:通过时空生成卷积网络合成动态模式(重点论文)
  • html2canvas+jsPDF导出超长网页的PDF
  • 云计算:OpenStack 分布式架构管理VXLAN网络(单控制节点与多计算节点)
  • MATLAB --- dlmread( )函数的用法
  • STM32CubeMX RS485接口使用
  • ClickHouse(20)ClickHouse集成PostgreSQL表引擎详细解析
  • R304S 指纹识别模块功能实现示例
  • 2、Excel:基础概念、表格结构与常见函数
  • 鱼类识别Python+深度学习人工智能+TensorFlow+卷积神经网络算法
  • ThreadLocal线程重用导致用户信息错乱的 Bug
  • 洛谷——P1143 进制转换
  • linux stop_machine 停机机制应用及一次触发 soft lockup 分析
  • ARM 链接器优化功能介绍
  • 动手学深度学习之卷积神经网络之池化层
  • HackTheBox - Medium - Linux - Ambassador
  • 嵌入式——循环队列