vue+ elementUI使用el-autocomplete从远程实时查询

页面需求如下：第一步，在“预制模板”中输入模板名，需要从数据库模糊查询出数据集，第二步，选中某条数据后，将对应的其他数值填入“合并方式”等其他项目中。

<template><el-dialog :title="'箱单发票创建设置'" append-to-body="true":close-on-click-modal="false" :visible.sync="visible"><el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px"><el-form-item label="预置模板" prop="ruleName"><el-autocomplete class="inline-input" v-model="dataForm.ruleName":fetch-suggestions="queryByRuleName" placeholder="预置模板"@select="handleSelect" size="mini"></el-autocomplete></el-form-item>....................省略其他组件....................</el-dialog>
</template><script>export default {data () {return {splitRules: [],dataForm: {id: 0,ruleName: '',mergeRuleList: [],sortRuleList: [],itemNumber: 20,pricePrecision: 2},....................省略其他变量....................methods: {....................省略其他方法....................queryByRuleName (queryString, callback) {this.$http({url: this.$http.adornUrl('/bg/splitRule/query'),method: 'post',params: this.$http.adornParams({'ruleName': queryString})}).then(({data}) => {if (data && data.code === 0) {this.splitRules = data.list} else {this.splitRules = []this.$message.error(data.msg)}callback(this.splitRules)})},handleSelect (item) {if (item.mergeRule !== null && item.mergeRule.length > 0) {this.dataForm.mergeRuleList = item.mergeRule.toString().split(';')}if (item.sortRule !== null && item.sortRule.length > 0) {this.dataForm.sortRuleList = item.sortRule.toString().split(';')}this.dataForm.id = item.ruleIdthis.dataForm.itemNumber = item.itemNumberthis.dataForm.pricePrecision = item.pricePrecision}}}
</script>

注意：el-autocomplete的下拉列表框默认显示元素中value属性的值，因此queryByRuleName查询到的集合元素中，需要将你想展示到下拉列表框的值命名为value。

vue+ elementUI使用el-autocomplete从远程实时查询相关推荐

vue ElementUi Tree效果展开、收起、查询
<el-row><el-col :span="14"><el-form @submit.native.prevent><el-input ...
常见的 vue elementUI el的标签总结
vue elementUI el的标签总结标签源码标签作用 el-col 整体 el-container 主体区域 el-tooltip 提示框信息 el-header 内容头部区域 el-asi ...
Vue+ElementUI纯前端技术实现对表格数据的增删改查
Vue+ElementUI纯前端技术实现对表格数据的增删改查页面展示效果一.页面结构分为三个部分 head body 以及script 一般我个人是在head中引入一些组件库 , 还有一些样式 ...
vue+elementUI完成登陆+注册
目录 1. vue怎么引入和配置使用element-ui框架 1.1 使用vue-cli脚手架工具创建一个vue项目 1.2 npm安装elementUI 1.3 在项目中src目录下找到main.j ...
vue+element-ui中实现多层级复杂的维度根据数据自动生成的表头
表头主要复杂在: 1,有三层,一层是大类,第二层是具体项,第三层是标准值/对比值 2,首列和末尾列是一层 3,整个表格的维度是根据数据的输入自己生成,也就是动态的下面是在 vue + eleUI 中 ...
SSH2（后台管理页面+Vue+Element-UI+动态树+分页+正则表达）
后台搭建-前端展示 1:加入maven項目 1.1创建如图中的工作流程包+配置文件 1.2导入Spring容器框架(业务逻辑处理) 2.Base(接口工具类): 3.SYS模块包: **Util工具类 ...
Java小记-Vue/ElementUI/Axios(超级无敌认真好用，万字收藏篇!!!!)
文章目录 Vue/ElementUI/Axios 前言 1 Vue简介 2 Vue的安装 3 Vue的简单使用 4 Vue的指令 4.1 什么是Vue的指令 4.2 Vue常用指令 5 Element ...
基于springboot+vue+element-ui开发的大型智慧校园电子班牌系统源码
Java智慧校园系统源码智慧学校源码小程序+电子班牌开发环境:Java+springboot+vue+element-ui+mysql 有演示,可正常上手项目+正版授权. 智慧校园云平台实现了智 ...
element显示服务器的图片,Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显而我们也常遇到表单中包含图片上传的需求,并且需要在table中显示图片,所以这里我就讲一下结合后端的SpringMVC框架如 ...

vue+ elementUI使用el-autocomplete从远程实时查询

vue+ elementUI使用el-autocomplete从远程实时查询相关推荐

最新文章

热门文章