el-select传入数据显示问题,组件显示与传入数据无法匹配的问题

问题描述

修改信息页面,表单中使用组件,点击编辑按钮携带行数据填充表单。携带数据 teamType 无法匹配 teamTypeListkey值,直接显示key值(应该显示对应的value值)

问题解析

猜想有可能是组件采用了强匹配===,传入数据和teamTypeListkey值类型不同,修改为相同数据类型即可

原代码
<el-select v-model="formData.teamType"  placeholder="请选择队伍类别" style="width: 90%;">
     <el-option
       v-for="item in teamTypeList"
       :key="item.value"
       :label="item.dicCnname"
       :value="item.value">
     </el-option>
 </el-select>
修正代码
<el-select v-model="formData.teamType"  placeholder="请选择队伍类别" style="width: 90%;">
     <el-option
       v-for="item in teamTypeList"
       :key="item.value"
       :label="item.dicCnname"
       :value="Number(item.value)">
     </el-option>
 </el-select>
注:小白临时的解决方法,应该有更好的方法才对,欢迎各位大佬指教!!!
  • 7
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
如果你想要在el-select中实现远程搜索加分页的功能,可以考虑使用element-ui中的el-pagination分页组件。 以下是实现步骤: 1. 在el-select组件中添加一个远程搜索的方法,该方法需要接收一个参数query,表示搜索关键字,同时需要返回一个Promise对象,该对象需要返回一个包含搜索结果的数组和总记录数的对象。 2. 在el-select组件中添加一个选项属性:remote。如果remote属性为true,则表示启用远程搜索和分页功能。 3. 在el-select组件中设置一个选项属性:remote-method。该属性需要绑定远程搜索方法。例如: ```html <el-select v-model="value" remote :remote-method="remoteMethod"></el-select> ``` 4. 在el-select组件中添加一个el-pagination分页组件,并绑定一个分页方法。例如: ```html <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"></el-pagination> ``` ```javascript data() { return { currentPage: 1, pageSize: 10, total: 0 } }, methods: { handleCurrentChange(page) { this.currentPage = page; this.remoteMethod(this.searchValue); }, remoteMethod(query) { return new Promise((resolve, reject) => { // 发送远程搜索请求,返回符合条件的数据和总记录数 const data = { list: [], total: 0 }; resolve(data) }).then(res => { this.options = res.list; this.total = res.total; }) } } ``` 在上面的代码中,el-pagination组件的current-page属性绑定到了currentPage变量,表示当前页码。page-size属性绑定到了pageSize变量,表示每页显示的条目数。total属性绑定到了total变量,表示总记录数。current-change事件绑定到了handleCurrentChange方法,表示用户切换页码时会调用该方法。 5. 在远程搜索方法中,根据传入的参数进行搜索,并返回符合条件的数据和总记录数。例如: ```javascript remoteMethod(query) { this.searchValue = query; return new Promise((resolve, reject) => { // 发送远程搜索请求,返回符合条件的数据和总记录数 setTimeout(() => { const data = { list: Array.from({ length: this.pageSize }, (v, k) => k + (this.currentPage - 1) * this.pageSize + 1), total: 100 }; resolve(data) }, 1000); }).then(res => { this.options = res.list; this.total = res.total; }) } ``` 在上面的代码中,我们使用setTimeout模拟了一个异步请求,返回符合条件的数据和总记录数。其中,list属性表示本页的数据,使用Array.from方法生成一个长度为pageSize的数组,每个元素的值等于当前页码和该元素在数组中的位置的乘积。total属性表示总记录数,假设总共有100条记录。 6. 在el-select组件中添加一个选项属性:loading。该属性需要绑定一个loading变量,表示正在加载数据。例如: ```html <el-select v-model="value" remote :remote-method="remoteMethod" :loading="loading"></el-select> ``` ```javascript data() { return { loading: false } }, methods: { remoteMethod(query) { this.loading = true; return new Promise((resolve, reject) => { // 发送远程搜索请求,返回符合条件的数据和总记录数 setTimeout(() => { const data = { list: Array.from({ length: this.pageSize }, (v, k) => k + (this.currentPage - 1) * this.pageSize + 1), total: 100 }; resolve(data) }, 1000); }).then(res => { this.options = res.list; this.total = res.total; this.loading = false; }) } } ``` 在上面的代码中,我们在远程搜索方法中设置了loading变量为true,表示正在加载数据。在异步请求完成后,我们将loading变量设置为false,表示加载数据完成。 这样,当用户输入关键字时,el-select组件会自动调用远程搜索方法进行搜索,并显示符合条件的数据。当用户切换页码时,el-pagination组件会自动调用分页方法加载更多数据。在加载数据时,el-select组件显示一个loading动画,提示用户正在加载数据

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值