Avue版本: v2.8.0及以上适用本文,v2.7.10及以下版本点这里
《 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
}
],
}
index.vue中在 avue-crud 组件中添加自定义插槽
<avue-crud :data="data" :option="option" v-model="formData">
<template slot="NumberForm">
<el-autocomplete
v-model="formData.Number"
:trigger-on-focus="false"
:fetch-suggestions="querySearchAsync"
placeholder="请输入内容"
@select="handleSelect($event,formData)">
</el-autocomplete>
</template>
</avue-crud>
index.vue中的 methods对象中的方法
<script>
export default {
name:"test",
data() {
return {
formData:{}
}
},
methods:{
querySearchAsync(queryString, cb) {
let res = []
queryNum(queryString).then(response =>{
response.data.data.forEach(item=>{
res.push({
value:item.Id,
desc1:item.Desc1,
desc2:item.Desc2
})
})
cb(res)
}).catch(e =>{
this.$message.error("请检查网络")
})
},
handleSelect(item,row) {
row.desc1 = item.desc1,
row.desc2 = item.desc2
},
}
}
</script>
路由中添加的方法(接口后端已写好,前端只是调用,本文不讨论后端实现)
export function queryNum(num) {
return request({
url: '/admin/version/vp/',
method: 'get',
params: {
"num":num
}
})
}
element-ui 方法效果如下: 在联动描述1、描述2 输入框时,几乎同步联动。
总结
1、element-ui方法效果最好,只发送一次请求,响应快; 2、element-ui方法简单,适合实际开发使用,适合开发者了解其运行原理,提升开发思维。 3、如果你有疑问或者有更好的实现方法请留言,交流学习
|