avue|Avue 远程搜索输入框，联动赋值 v2.8.0及以上 vue.js|javascript|elementui|工作记录

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

文章目录

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

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

文章图片

前言 avue在更新到 v2.8.0 版本之后，优化了卡槽逻辑性能，对slot、formslot、typeslot、headerslot、labelslot、errorslot等卡槽进行了调整。所以之前版本的代码已经不适用。需要对代码进行数据调整。
一、基于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", "search": true,//设置搜索项 "span": 12, }, { "type": "input", "label": "描述1", "prop": "desc1", "span": 12, }, { "type": "input", "label": "描述2", "prop": "desc2", "span": 12, }, { "type": "input", "label": "版本", "prop": "craftVerion", "span": 12 } ], }

【avue|Avue 远程搜索输入框，联动赋值 v2.8.0及以上】index.vue中在 avue-crud 组件中添加自定义插槽

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

> export default { name:"test", data() { return { formData:{} } }, methods:{ //远程搜索 querySearchAsync(queryString, cb) { let res = []//定义数组，存储暂时的下拉数据 queryNum(queryString).then(response =>{//queryNum 为定义的路由方法 response.data.data.forEach(item=>{ res.push({ value:item.Id, 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 方法效果如下：