Java+VUE 实现下拉框联想查询

最新推荐文章于 2024-07-18 10:10:05 发布

喜欢吃糖丶

最新推荐文章于 2024-07-18 10:10:05 发布

阅读量883

点赞数

分类专栏： Java VUE 文章标签： java vue.js 开发语言

本文链接：https://blog.csdn.net/weixin_46573158/article/details/125407661

版权

Java 同时被 2 个专栏收录

27 篇文章 7 订阅

订阅专栏

VUE

11 篇文章 1 订阅

订阅专栏

该博客介绍了如何在Vue.js中使用Select组件实现下拉框查询功能，通过filterable属性实现关键词匹配。后端使用Java服务获取数据，XML查询语句从数据库中检索信息。示例代码包括前端Vue模板和JS方法，以及后端Service和XML查询。

摘要由CSDN通过智能技术生成

作用

实现下拉框查询，并且能够输入关键词匹配下拉框数据

效果图

前端

所有关键代码已做处理

VUE：

<Col span="8" class="txtStyle">
                    <Form :label-width="100" ref="receiptForm" :model="receiptForm">
                        <FormItem label="名称" prop="receiptName">
                            <Select v-model="receiptForm.Name" class="ivu-select8" filterable>
                                <Option v-for="dict in receiptList" :value="dict.value" :key="dict.value">{{dict.name}}</Option>
                            </Select>
                        </FormItem>
                    </Form>
                </Col>

JS：

				receiptList:[],
                receiptForm:{
                    receiptName:''
                },
                receiptFormStr:'',

方法：

findAllReceiptInfo(){
                util.ajax.post('/aop/aop', {
                    param:{
                        createperson:this.$store.state.user.loginUser.tableid
                    },
                    className:'Service',
                    method:'findAllInfo'
                }).then(res => {
                    if (res.data.data != null){
                        this.receiptList = res.data.data;
                    } else {
                        this.receiptList = [];
                    }
                });
            },

后端

service：

public Map<String, Object> findAllReceiptInfo(String params) throws Exception{
        List<ReceiptsEntity> list = receiptloanDao.findAllReceiptInfo();
        List<SelectBo> result=new ArrayList<SelectBo>();
        if(list!=null){
            for(ReceiptsEntity obj:list){
                SelectBo bo=new SelectBo();
                bo.setName(obj.getReceiptName());
                bo.setValue(obj.getReceiptName());
                result.add(bo);
            }
        }
        Constants.getSuccMsg(resultMap, result);
        return resultMap;
    }

xml（忽略Dao）

<select id="findAllReceiptInfo" resultType="com.spdb.lease.entity.bussinss.document.ReceiptsEntity">
        select
        id as receiptLoanId,
        name as receiptName
        from a
        where IS_DELETE = 'N'
    </select>