avue|Avue 远程搜索输入框，联动赋值其他组件 v2.7.10及以下 javascript|vue.js|前端|elementui|工作

Avue版本:v2.7.10及以下适用本文，v2.8.0及以上版本点这里

文章目录

《 Avue 远程搜索输入框，联动赋值》
前言
一、基于avue自带属性实现（效果差）
二、基于element-ui实现（效果好）
总结

《 Avue 远程搜索输入框，联动赋值》效果图：

文章图片

前言在很多情况下需要联动赋值给输入框，本文基于avue框架分别从avue与element-ui两方面进行远程搜索输入框联动赋值给其他输入框。

需求
- 1、后台接受模糊查询参数，从编码字段的输入值进行后台模糊匹配并返回json数据。（接口已经实现，传值调用即可）
- 2、根据编码的选择，将数据行自带的值匹配到 描述1 、描述2中。

提示：以下是本篇文章正文内容，下面案例可供参考；
本文是基于对avue基本的表单结构熟悉后进行的操作，基础步骤不详的，可联系作者交流学习。
一、基于avue自带属性实现（效果差） 【avue|Avue 远程搜索输入框，联动赋值其他组件 v2.7.10及以下】示例：avue 是基于element-ui封装的一种工具，该工具是为了解决数据表单任务而创建的。
Option属性

export const tableOption = { "border": true, "index": true, "indexLabel": "序号", "stripe": true, "menuAlign": "center", "align": "center", "searchMenuSpan": 6, "searchslot": true, "selection":true, "column": [ { "type": "select", "label": "编码", "prop": "Number", "remote": true,//开启远程访问 "dicFlag":false,//初次获得焦点不下拉 "dicUrl": "/admin/version/vp?num={{key}}",//key为当前输入值 "props": {//下拉列表的选项值，对应编码 lable: 'Part', value: 'Part', }, "cascaderItem": ['desc1', 'desc2'],//联动两个属性 "search": true,//远程搜索 "span": 12, }, { "type": "input", "label": "描述1", "prop": "desc1", "dicFlag":false, "dicUrl": "/admin/version/vp?num={{Number}}",//联动时获取productNumber的值 "props": {//描述1 lable: 'Desc1', value: 'Desc1', }, "cascaderIndex": 0,//默认联动 "span": 12, }, { "type": "input", "label": "描述2", "prop": "desc2", "dicFlag":false, "dicUrl": "/admin/craftversion/vp?num={{Number}}", //联动时获取productNumber的值 "props": {//描述2 lable: 'Desc2', value: 'Desc2', }, "cascaderIndex": 0, "span": 12, }, { "type": "input", "label": "版本", "prop": "Verion", "span": 12 } ], }

基于avue属性方法的效果如下：

文章图片

在联动描述1、描述2 输入框时，存在明显卡顿（GIF经过加速，卡顿可能不明显）

二、基于element-ui实现（效果好） Option属性

export const tableOption = { "border": true, "index": true, "indexLabel": "序号", "stripe": true, "menuAlign": "center", "align": "center", "searchMenuSpan": 6, "searchslot": true, "selection":true, "column": [ { "type": "select", "label":"编码", "prop": "Number", "formslot":true,//开启自定义插槽，引入element-ui "search": true,//设置搜索项 "span": 12, }, { "type": "input", "label": "描述1", "prop": "desc1", "span": 12, }, { "type": "input", "label": "描述2", "prop": "desc2", "span": 12, }, { "type": "input", "label": "版本", "prop": "Verion", "span": 12 } ], }

index.vue中在 avue-crud 组件中添加自定义插槽

index.vue中的 methods对象中的方法

//远程搜索 querySearchAsync(queryString, cb) { let res = []//定义数组，存储暂时的下拉数据 queryNum(queryString).then(response =>{//queryNum 为定义的路由方法 response.data.data.forEach(item=>{ res.push({ value:item.Part, desc1:item.Desc1, desc2:item.Desc2 }) }) cb(res)//数据返回，value为下拉可见项 }).catch(e =>{ this.$message.error("请检查网络") }) },//选择下拉项时 handleSelect(item,row) { //为描述1、描述2 联动赋值 row.desc1 = item.desc1, row.desc2 = item.desc2 },

路由中添加的方法（接口后端已写好，前端只是调用，本文不讨论后端实现）

export function queryNum(num) { return request({ url: '/admin/version/vp/',//后台监听的路径，模糊匹配返回 method: 'get',//get请求 params: { "num":num//监听的属性值 } }) }

element-ui 方法效果如下：

文章图片

在联动描述1、描述2 输入框时，几乎同步联动。

总结 1、element-ui方法效果最好，只发送一次请求，响应快；
2、avue属性方法每联动一次就需要发生一次请求，导致响应慢。
3、avue属性方法较简单，适合测试接口使用。
4、element-ui方法简单，适合实际开发使用，适合开发者了解其运行原理，提升开发思维。
5、如果你有疑问或者有更好的实现方法请留言，交流学习