element ui中select多选框change选择获取选项的所有字段信息

        在 Element UI 的 Select 组件中,多选框的选择变化(change)事件可以通过监听 change 事件来获取选项的所有字段信息。

        当多选框选项发生改变时,会触发 change 事件,此时可以通过该事件的回调函数来获取选中的选项的所有字段信息。

示例:

html代码:

<el-form-item label="发送到用户" prop="feishufeishuUserValue" label-width="220px">
      <el-select style="width: 100%" v-model="form.feishuUserValue" value-key="form.feishuUserValue" filterable
            multiple placeholder="请选择" @change="selectUser">
            <el-option v-for="item in feishuUserList" :key="item.userId" :label="item.nickName" :value="item.userIds">
            </el-option>
      </el-select>
</el-form-item>

data数据:

data(){
    retuurn{
        feishuUserValue: [], //飞书用户
        
        feishuUserList: [],
    }
}

methods方法:

// 选择飞书用户
    selectUser(e) {
      this.selectedUserIds = e;
      this.form.employee.ids = e;
      // 从选项数组中获取选中的选项的完整信息
      const selectedOptions = this.feishuUserList.filter((item) =>
        e.includes(item.userIds)
      );
      console.log("选择", selectedOptions);
      this.form.dept = [];  //注意每次添加之前清空数组
      selectedOptions.forEach(item => {
        this.form.dept.push(item.deptIds);
      })
    },

        在上面的示例中,使用了 el-select 组件来创建一个多选框,并且监听了 change 事件。feishuUserList数组包含了所有的选项。

        当选项发生变化时,selectUser方法会被调用,传入选中的值的数组 selectedValues

        通过筛选 feishuUserList数组,找出被选中的选项的完整信息,并将其打印到控制台上。

  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,下面我将为你提供一些示例代码和注意事项。 首先,我们需要在数据建立一个书籍表,包含书籍的基本信息,包括成色和价格等字段。以下是一个简单的MySQL建表语句: ```sql CREATE TABLE book ( id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(50) NOT NULL, author VARCHAR(50) NOT NULL, price DECIMAL(10,2) NOT NULL, quality VARCHAR(10) NOT NULL ); ``` 接下来,我们使用SpringBoot框架编写后端代码,建立一个RESTful API,用于从数据获取书籍信息,以及更新书籍的成色和价格信息。以下是一个简单的Java代码示例: ```java @RestController @RequestMapping("/api/books") public class BookController { @Autowired private BookRepository bookRepository; @GetMapping public List<Book> getAllBooks() { return bookRepository.findAll(); } @PutMapping("/{id}") public Book updateBook(@PathVariable Long id, @RequestBody Book book) { Book existingBook = bookRepository.findById(id).orElse(null); if (existingBook != null) { existingBook.setQuality(book.getQuality()); calculatePrice(existingBook); return bookRepository.save(existingBook); } else { throw new RuntimeException("Book not found"); } } private void calculatePrice(Book book) { // 根据书籍成色重新计算价格 // ... } } ``` 在前端,我们可以使用Vue.js框架和Element UI组件库来构建用户界面。以下是一个简单的Vue.js代码示例: ```html <template> <div> <el-table :data="books" style="width: 100%"> <el-table-column prop="name" label="书名"></el-table-column> <el-table-column prop="author" label="作者"></el-table-column> <el-table-column prop="price" label="价格"></el-table-column> <el-table-column prop="quality" label="成色"> <template slot-scope="scope"> <el-select v-model="scope.row.quality" @change="updateBook(scope.row)"> <el-option label="全新" value="全新"></el-option> <el-option label="九成新" value="九成新"></el-option> <el-option label="八成新" value="八成新"></el-option> </el-select> </template> </el-table-column> </el-table> </div> </template> <script> import axios from 'axios'; export default { data() { return { books: [], }; }, created() { this.fetchBooks(); }, methods: { fetchBooks() { axios.get('/api/books').then((response) => { this.books = response.data; }); }, updateBook(book) { axios.put(`/api/books/${book.id}`, book).then(() => { // 更新书籍成功 // ... }); }, }, }; </script> ``` 在上面的代码,我们使用Element UI的表格组件来展示书籍列表,并添加了一个下拉框组件来让用户选择书籍的成色。当用户选择成色后,我们通过调用后端API接口来更新书籍的成色和价格信息,并在页面上重新显示价格。 最后,需要注意以下几点: 1. 数据的书籍信息应该是真实的,以便计算价格。 2. 后端API应该可以处理并返回正确的书籍信息和计算后的价格。 3. 前端界面应该能够正确地展示书籍列表,并能够正确地更新书籍的成色和价格信息。 希望这个回答能够对你有所帮助。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值