首页 编程语言正文

SpringBoot + ElementUI 动态下拉列表

无情 阅读：661 2021-03-31 13:45:05 评论：0

效果展示:

实现思路： 

1、下拉框绑定自定义实体参数对象，下拉框选项动态绑定自定义数组对象:

 <el-select v-model="current" placeholder="请书籍类别"> 
              <el-option 
                  v-for="item in category" 
                  :key="item.value" 
                  :label="item.label" 
                  :value="item.value"> 
                </el-option> 
              </el-select>

2、VUE实例化对象中定义自定义参数实体对象current,下拉框选项动态绑定自定义数组对象：

data () { 
     return { 
        tableData: [], 
        category: [], //下拉框选项数组对象 
        book: { 
          bookName: '', 
          bookCategory: '' 
        }, 
        current:''  //下拉框选中自定义实体对象 
      } 
  }

3、VUE 实例方法定义定义获取下拉框选项的后台接口，并在vue 实例化时完成接口后端调用

// vue 实例方法定义 
methods:{ 
     getCategory(){ 
        var self = this 
        this.$axios.get('/category/find') 
          .then(function (res) { 
             self.category = []; 
            res.data.data.forEach(item => { 
                console.log(item); 
                let arr = { 
                    value: item.categoryId, 
                    label: item.categoryName 
                }; 
                
                self.category.push(arr); 
            }); 
          }) 
          .catch(function (err) { 
            console.log(err) 
          }) 
    } 
}, 
// VUE 实例调用相关接口初始化方法： 
 mounted: function () { 
      this.getCategory(); 
  }

相关代码：

VUE +ElementUI 源码：

 <style> 
  h1, h2 { 
  font-weight: normal; 
} 
ul { 
  list-style-type: none; 
  padding: 0; 
} 
li { 
  display: inline-block; 
  margin: 0 10px; 
} 
a { 
  color: #42b983; 
} 
</style> 
<template> 
  <div id="bookSearch"> 
      <el-col :span="19"> 
          <el-form :inline="true"> 
            <el-form-item label="书名"> 
              <el-input v-model="book.bookName"  placeholder="书籍关键字"></el-input> 
            </el-form-item> 
            <el-form-item label="类别"> 
             <el-select v-model="current" placeholder="请书籍类别"> 
                <el-option 
                  v-for="item in category" 
                  :key="item.value" 
                  :label="item.label" 
                  :value="item.value"> 
                </el-option> 
              </el-select> 
            </el-form-item> 
          <el-form-item > 
            <div style="text-align:right"> 
              <!--自定义searchHandler函数--> 
              <el-button type="primary" @click="searchHandler">查询</el-button>  
            </div> 
          </el-form-item> 
        </el-form> 
      </el-col> 
 
      <el-table :data="tableData" stripe border style="width:100%" highlight-current-row> 
      <el-table-column type="selection" width="55"> 
      </el-table-column> 
      <el-table-column prop="bookId" label="ID" align="center" min-width="120"> 
        <template slot-scope="scope"> 
          <span>{
  
   { scope.row.bookId}}</span> 
        </template> 
      </el-table-column> 
      <el-table-column prop="bookName" label="书名" align="center" min-width="100"> 
        <template slot-scope="scope"> 
          <span>{
  
   { scope.row.bookName}}</span> 
        </template> 
      </el-table-column> 
      <el-table-column prop="bookAuthor" label="作者" align="center" min-width="100"> 
        <template slot-scope="scope"> 
          <span>{
  
   { scope.row.bookAuthor}}</span> 
        </template> 
      </el-table-column> 
      <el-table-column prop="bookpublish" label="出版社" align="center" min-width="100"> 
        <template slot-scope="scope"> 
          <span>{
  
   { scope.row.bookpublish}}</span> 
        </template> 
      </el-table-column> 
    </el-table> 
  </div> 
</template> 
 
<script> 
export default { 
   data () { 
     return { 
        tableData: [], 
        category: [],  
        book: { 
          bookName: '', 
          bookCategory: '' 
        }, 
        current:'' 
      } 
  }, 
  methods:{ 
    init () { 
        var self = this 
        this.$axios.get('/book/find') 
          .then(function (res) { 
            self.tableData = res.data.data 
          }) 
          .catch(function (err) { 
            console.log(err) 
          }) 
      }, 
    searchHandler(){        
        var self = this 
        console.log(self.current); 
        this.$axios.get('/book/find?bookName=' + this.book.bookName) 
          .then(function (res) { 
            self.tableData = res.data.data 
          }) 
          .catch(function (err) { 
            console.log(err) 
          })  
    }, 
    getCategory(){ 
        var self = this 
        this.$axios.get('/category/find') 
          .then(function (res) { 
             self.category = []; 
            res.data.data.forEach(item => { 
                console.log(item); 
                let arr = { 
                    value: item.categoryId, 
                    label: item.categoryName 
                }; 
                
                self.category.push(arr); 
            }); 
          }) 
          .catch(function (err) { 
            console.log(err) 
          }) 
    } 
  }, 
  mounted: function () { 
      this.init(); 
      this.getCategory(); 
  } 
} 
</script>

SpringBoot 后端代码:

package com.zzg.controller; 
 
import java.util.ArrayList; 
import java.util.List; 
 
import org.apache.commons.lang3.RandomUtils; 
import org.springframework.stereotype.Controller; 
import org.springframework.web.bind.annotation.CrossOrigin; 
import org.springframework.web.bind.annotation.PathVariable; 
import org.springframework.web.bind.annotation.RequestBody; 
import org.springframework.web.bind.annotation.RequestMapping; 
import org.springframework.web.bind.annotation.RequestMethod; 
import org.springframework.web.bind.annotation.ResponseBody; 
 
import com.alibaba.druid.util.StringUtils; 
import com.alibaba.fastjson.JSONObject; 
import com.zzg.common.model.Result; 
import com.zzg.domain.TestCategory; 
 
import io.swagger.annotations.Api; 
import io.swagger.annotations.ApiOperation; 
import io.swagger.annotations.ApiParam; 
 
@Controller 
@RequestMapping("/api/category") 
@CrossOrigin 
@Api(value = "模拟测试Controlle", tags = "模拟测试操作服务") 
public class TestCategoryController { 
	static List<TestCategory> container = new ArrayList<TestCategory>(); 
	static { 
		container.add(new TestCategory("1","java")); 
		container.add(new TestCategory("2","Python")); 
		container.add(new TestCategory("3","PHP")); 
		container.add(new TestCategory("4","其他")); 
		 
	} 
	 
	@ApiOperation(httpMethod = "POST", value = "模拟测试对象保存") 
	@RequestMapping(value = "/insert", method = { RequestMethod.POST}, produces = "application/json;charset=UTF-8") 
	@ResponseBody 
	public Result insert( 
			@RequestBody @ApiParam(name = "模拟测试对象", value = "json格式对象", required = true)JSONObject entity) { 
		TestCategory user = entity.toJavaObject(TestCategory.class); 
		if(StringUtils.isEmpty(user.getCategoryId())) { 
			RandomUtils.nextInt(6, 1000); 
			Integer sid = RandomUtils.nextInt(); 
			user.setCategoryId(String.valueOf(sid)); 
		} 
		 
		container.add(user); 
		return Result.ok(); 
	} 
	 
	@ApiOperation(httpMethod = "POST", value = "模拟测试对象删除") 
	@RequestMapping(value = "/delete/{id}", method = { RequestMethod.DELETE }) 
	@ResponseBody 
	public Result delete( 
			@PathVariable String id) { 
 
//		container.stream() 
//		.filter(u-> u.getId().equalsIgnoreCase(id)) 
//		.findFirst() 
//		.ifPresent(u->System.out.println(u.getName())); 
		container.removeIf(u -> u.getCategoryId().equalsIgnoreCase(id)); 
		 
		return Result.ok(); 
		 
	} 
	 
	@ApiOperation(httpMethod = "POST", value = "模拟测试对象更新") 
	@RequestMapping(value = "/update", method = { RequestMethod.POST }, produces = "application/json;charset=UTF-8") 
	@ResponseBody 
	public Result update( 
			@RequestBody @ApiParam(name = "用户对象", value = "json格式对象", required = true)  TestCategory entity) { 
		container.removeIf(u -> u.getCategoryId().equalsIgnoreCase(entity.getCategoryId())); 
		container.add(entity); 
		return Result.ok(); 
	} 
	 
	@RequestMapping(value="/find", method={RequestMethod.GET}, produces = "application/json;charset=UTF-8") 
	@ResponseBody 
	@ApiOperation(httpMethod = "GET", value = "模拟测试对象查询") 
	public String find() { 
		JSONObject obj = new JSONObject(); 
		 
		obj.put("code", 0); 
		obj.put("data", container); 
		return obj.toJSONString(); 
	} 
 
} 

package com.zzg.controller; 
 
import java.util.ArrayList; 
import java.util.List; 
import java.util.stream.Collectors; 
 
import org.apache.commons.lang3.RandomUtils; 
import org.springframework.stereotype.Controller; 
import org.springframework.web.bind.annotation.CrossOrigin; 
import org.springframework.web.bind.annotation.PathVariable; 
import org.springframework.web.bind.annotation.RequestBody; 
import org.springframework.web.bind.annotation.RequestMapping; 
import org.springframework.web.bind.annotation.RequestMethod; 
import org.springframework.web.bind.annotation.RequestParam; 
import org.springframework.web.bind.annotation.ResponseBody; 
 
import com.alibaba.druid.util.StringUtils; 
import com.alibaba.fastjson.JSONObject; 
import com.zzg.common.model.Result; 
import com.zzg.domain.TestBook; 
 
import io.swagger.annotations.Api; 
import io.swagger.annotations.ApiOperation; 
import io.swagger.annotations.ApiParam; 
 
@Controller 
@RequestMapping("/api/book") 
@CrossOrigin 
@Api(value = "模拟测试Controlle", tags = "模拟测试操作服务") 
public class TestBookController { 
	static List<TestBook> container = new ArrayList<TestBook>(); 
	static { 
		container.add(new TestBook("1","java编程思想","**译","机械出版社","1","100","Java 编程核心思想")); 
		container.add(new TestBook("2","Python编程思想","**译","机械出版社","2","100","Python 编程核心思想")); 
		container.add(new TestBook("3","PHP编程思想","**译","机械出版社","3","100","PHP 编程核心思想")); 
		container.add(new TestBook("4","java设计模式","**译","机械出版社","1","100","Java设计模式编程核心思想")); 
		container.add(new TestBook("5","算法导论","**译","机械出版社","1","100","算法导论")); 
		 
	} 
	 
	@ApiOperation(httpMethod = "POST", value = "模拟测试对象保存") 
	@RequestMapping(value = "/insert", method = { RequestMethod.POST}, produces = "application/json;charset=UTF-8") 
	@ResponseBody 
	public Result insert( 
			@RequestBody @ApiParam(name = "模拟测试对象", value = "json格式对象", required = true)JSONObject entity) { 
		TestBook user = entity.toJavaObject(TestBook.class); 
		if(StringUtils.isEmpty(user.getBookId())) { 
			RandomUtils.nextInt(6, 1000); 
			Integer sid = RandomUtils.nextInt(); 
			user.setBookId(String.valueOf(sid)); 
		} 
		 
		container.add(user); 
		return Result.ok(); 
	} 
	 
	@ApiOperation(httpMethod = "POST", value = "模拟测试对象删除") 
	@RequestMapping(value = "/delete/{id}", method = { RequestMethod.DELETE }) 
	@ResponseBody 
	public Result delete( 
			@PathVariable String id) { 
 
//		container.stream() 
//		.filter(u-> u.getId().equalsIgnoreCase(id)) 
//		.findFirst() 
//		.ifPresent(u->System.out.println(u.getName())); 
		container.removeIf(u -> u.getBookId().equalsIgnoreCase(id)); 
		 
		return Result.ok(); 
		 
	} 
	 
	@ApiOperation(httpMethod = "POST", value = "模拟测试对象更新") 
	@RequestMapping(value = "/update", method = { RequestMethod.POST }, produces = "application/json;charset=UTF-8") 
	@ResponseBody 
	public Result update( 
			@RequestBody @ApiParam(name = "用户对象", value = "json格式对象", required = true)  TestBook entity) { 
		container.removeIf(u -> u.getBookId().equalsIgnoreCase(entity.getBookId())); 
		container.add(entity); 
		return Result.ok(); 
	} 
	 
	@RequestMapping(value="/find", method={RequestMethod.GET}, produces = "application/json;charset=UTF-8") 
	@ResponseBody 
	@ApiOperation(httpMethod = "GET", value = "模拟测试对象查询") 
	public String find(@RequestParam(required = false) String bookName) { 
		JSONObject obj = new JSONObject(); 
		 
		obj.put("code", 0); 
		if(!StringUtils.isEmpty(bookName)) { 
			List<TestBook> filter = container.stream().filter(item ->{ 
				return item.getBookName().contains(bookName); 
			}).collect(Collectors.toList()); 
			obj.put("data", filter); 
		} else { 
			obj.put("data", container); 
		} 
		 
		return obj.toJSONString(); 
	} 
}

 

标签:Spring Boot
声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
关注我们

一个IT知识分享的公众号

友情链接IM LINKS