springboot+vue+element-ui+mybatisplus获取后端数据库表中书籍价格等,同时在前端表格中使用一个下拉列表框来选择书的成色(全新,九成新等),然后价格列根据所选成色自动进行相应的计算得出新的价格并显示出来的具体代码实现,要求写出quality属性的具体值
时间: 2024-02-27 08:51:49 浏览: 87
好的,首先你需要在后端定义一个 Book 实体类,其中包含书籍价格和成色两个属性,类似于以下代码:
```java
public class Book {
private Long id;
private String name;
private Double price;
private String quality;
// 省略getter、setter等方法
}
```
其中 quality 属性表示书的成色,可以有多个取值,比如 "全新"、"九成新" 等。然后在 MybatisPlus 的 Mapper 中定义一个查询方法,用于获取所有的 Book 数据,如下所示:
```java
public interface BookMapper extends BaseMapper<Book> {
List<Book> selectAllBooks();
}
```
接下来在 Controller 中编写一个获取所有 Book 数据的接口,如下所示:
```java
@RestController
@RequestMapping("/api/books")
public class BookController {
@Autowired
private BookMapper bookMapper;
@GetMapping
public List<Book> getAllBooks() {
return bookMapper.selectAllBooks();
}
}
```
然后在前端使用 ElementUI 的 el-table 组件来展示 Book 数据,并添加一个下拉列表框用于选择书的成色,如下所示:
```html
<el-table :data="books">
<el-table-column prop="name" label="书名"></el-table-column>
<el-table-column prop="price" label="价格"></el-table-column>
<el-table-column label="成色">
<template slot-scope="scope">
<el-select v-model="scope.row.quality" @change="calculatePrice(scope.row)">
<el-option label="全新" value="全新"></el-option>
<el-option label="九成新" value="九成新"></el-option>
<!-- 其他成色选项 -->
</el-select>
</template>
</el-table-column>
<el-table-column prop="newPrice" label="新价格"></el-table-column>
</el-table>
```
其中 books 是从后端获取的所有 Book 数据,scope.row 表示当前行的数据,quality 表示当前书的成色,calculatePrice 方法用于计算新价格并更新到 newPrice 列中,代码如下所示:
```javascript
methods: {
calculatePrice(row) {
switch (row.quality) {
case '全新':
row.newPrice = row.price * 1.2;
break;
case '九成新':
row.newPrice = row.price * 1.1;
break;
// 其他成色的价格计算方法
}
},
// 从后端获取所有 Book 数据
fetchBooks() {
axios.get('/api/books').then(response => {
this.books = response.data;
});
}
},
mounted() {
this.fetchBooks();
}
```
这样就可以实现根据所选成色自动计算出新价格并显示出来的功能了。注意在 Book 实体类中要添加 newPrice 属性以保存计算出来的新价格。
阅读全文