Avue 基于element-ui实现远程搜索输入框 V2.8.0及以上
阅读数:135 评论数:0
跳转到新版页面分类
html/css/js
正文
1、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
}
],
}
2、在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>
3、methods中的方法
<script>
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
},
}
}
</script>
相关推荐
一、去掉或修改横线颜色
.twj-table td,
.twj-table ::v-deep th.is-leaf {
border-bottom: 1px solid #cadcff;
}
二、
一、问题描述
点击清空按钮clearable之后,如果输入框已经是聚集状态,再次输入时建议框不显示。
原因:
组件在执行清除事件时,将activat