SpringBoot 实现下拉框

前端页面:

<div class="layui-form-item">
                <label class="layui-form-label" ><span
                            class="x-red">*</span>素材类型:</label>
                    <div class="layui-input-inline">
<!--                        <input type="text" class="layui-input" th:value="${sourceMateria.name}" name="name"  placeholder="修改素材类型" id="sourceId"/>-->
                        <select id="name" name="name" class="select"  size="1" >
                            <option th:each="sourceMateriaTypes:${sourceMateriaTypes}" th:value="${sourceMateriaTypes.name}"
                                    th:text="${sourceMateriaTypes.name}" th:selected="${sourceMateria.sourceId==sourceMateriaTypes.id}"></option>
                        </select>
                        </div>
                        </div>

后端代码:

/**
    * 添加跳转页面
    * @return
    */
    @GetMapping("editBefore/{id}")
    public String editBefore(Model model,@PathVariable("id")Long id){
        SourceMateria sourceMateria= sourceMateriaService.getById(id);
        //获取类型名用以回显数据
        String name=sourceMateriaTypeService.selectById(id).getName();
        sourceMateria.setName(name);

        List<SourceMateriaType> sourceMateriaTypes=sourceMateriaService.selectAllType();
        model.addAttribute("sourceMateriaTypes",sourceMateriaTypes);
        model.addAttribute("sourceMateria",sourceMateria);
        return prefix+"edit";
    }
    /**
    * 添加
    * @param sourceMateria
    * @return
    */
    @PostMapping("edit")
    @ResponseBody
    public AjaxResult edit(SourceMateria sourceMateria,
                           @RequestParam(required = false,value = "videoFile") MultipartFile videoFile,
                           @RequestParam(required = false,value = "imageFile") MultipartFile imageFile,
                           @RequestParam(required = false) String name,
                           @RequestParam(required = false) String title,
                           @RequestParam(required = false) String content,
                           @RequestParam(required = false) Integer traffic){
        sourceMateria.setTitle(title);
        sourceMateria.setContent(content);
        sourceMateria.setTraffic(traffic);
        //根据素材类型查素材id并加入sourceMateria进行更改数据
        QueryWrapper<SourceMateriaType> queryWrapper = new QueryWrapper<SourceMateriaType>();
        SourceMateriaType sourceMateriaType = sourceMateriaTypeService.selectOne(queryWrapper.eq("name", name));
        sourceMateria.setSourceId(sourceMateriaType.getId());
        //上传文件
        if (imageFile != null){
            String upload = null;
            upload = OssFileUtils.uploadSingleFile(imageFile);
            sourceMateria.setIcon(upload);
        }

        if (videoFile != null){
            String upload = null;
            upload = OssFileUtils.uploadSingleFile(imageFile);
            sourceMateria.setVideoUrl(upload);
        }
        return toAjax(sourceMateriaService.updateById(sourceMateria));
    }
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现Springboot+Vue下拉框搜索功能,可以使用element-ui中的el-select组件,并在其中使用el-option组件作为下拉选项。 1. 首先,将el-select组件放置在需要的位置上,并给它一个v-model属性,表示当前选中的值。同时,添加一个filterable属性,表示启用搜索功能。 ``` <el-select v-model="selectedValue" filterable> ... </el-select> ``` 2. 在el-select组件内部,使用el-option组件作为下拉选项。对于需要搜索的选项,可以在el-option组件上添加一个label属性。 ``` <el-select v-model="selectedValue" filterable> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> ``` 3. 在Vue实例中,定义一个options数组,包含所有可选的选项。在需要搜索时,可以通过computed属性进行过滤。 ``` computed: { filteredOptions() { return this.options.filter(option => option.label.toLowerCase().indexOf(this.searchText.toLowerCase()) >= 0); } } ``` 4. 在el-select组件中,使用v-for指令遍历filteredOptions数组,然后将label和value分别作为el-option组件的属性。 ``` <el-select v-model="selectedValue" filterable> <el-option v-for="item in filteredOptions" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> ``` 5. 最后,在Vue实例中,定义一个searchText变量,表示当前搜索的文本。可以在el-select组件上添加一个@query-change事件,当搜索文本发生变化时,将searchText变量更新为最新的搜索文本。 ``` <el-select v-model="selectedValue" filterable @query-change="searchText=$event"> ... </el-select> ``` 在Springboot中,可以使用RestController注解定义一个RESTful接口,然后在Vue中使用axios库发送HTTP请求,获取可选项数据。 ``` @RestController @RequestMapping("/api/options") public class OptionController { @GetMapping public List<Option> getOptions() { // 返回所有可选项 } } ``` 在Vue中,使用axios库发送HTTP请求,获取可选项数据,并将数据保存在options数组中。 ``` <script> import axios from 'axios'; export default { data() { return { options: [], selectedValue: null, searchText: '' } }, created() { this.fetchOptions(); }, methods: { fetchOptions() { axios.get('/api/options') .then(response => this.options = response.data) .catch(error => console.log(error)); } }, computed: { filteredOptions() { return this.options.filter(option => option.label.toLowerCase().indexOf(this.searchText.toLowerCase()) >= 0); } } } </script> ``` 这样,就可以实现Springboot+Vue下拉框搜索功能了。需要注意的是,在发送HTTP请求时,应该使用正确的接口地址和请求方法。在获取可选项数据后,应该将数据保存在Vue实例的options数组中,以便在el-select组件中使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值