浅谈Vue元素中选择下拉框选取值的问题 - 行业资讯 - 肥雀云

之前写了。一个原生的选择的,因为展示效果原因,给删除掉了,忘记保存代码了,现在大家展示使用elementUI的下拉框封装一个组件,供咱们项目中经常调用,减少代码量。

　　　　　　& lt; el-select v模型=熬」堋闭嘉环?扒胙≡瘛爸厥庸丶?癿ateGroup”比; 　　& lt; el-option:禁用=" true ": value=" https://www.yisu.com/zixun/null "比; 　　& lt;跨在周次& lt;/span> 　　& lt;跨度比;开始日期& lt;/span> 　　& lt;跨度比;截止日期& lt;/span> 　　& lt;/el-option> 　　& lt; el-option v="项,指数在res”:关键=爸甘?label="项目。mateGroup“v-bind:价值=" https://www.yisu.com/zixun/item "比; 　　& lt;跨在{{项目。mateGroup}} & lt;/span> 　　& lt;跨度比;{{项目。weekStartDate}} & lt;/span> 　　& lt;跨在{{项目。weekEndDate}} & lt;/span> 　　& lt;/el-option> 　　& lt;/el-select>之前　　　　

　　　　　　& lt; script> 　　从“jQuery”进口jQuery 　　出口默认{ 　　道具:(' orgCode ', ' farmOrg '), 　　数据(){ 　　返回{ 　　res: [], 　　尽管:”, 　　weekse:“ 　　} 　　}, 　　创建:函数(){ 　　var _self=这　　_self.getWeekYearly () 　　}, 　　看:{ 　　尽管:函数(val) { 　　这一点。weekse=瓦尔　　console.log (this.weekse) 　　this.getL () 　　} 　　}, 　　方法:{ 　　getWeekYearly () { 　　var _self=这　　jQuery.ajax ({ 　　url:‘/标准/+ _self.orgCode + + _self“/薄armOrg + '/getWeekly ', 　　类型:“得到”,//contentType: application/json, 　　数据类型:json, 　　成功:函数(res) { 　　_self。res=res 　　}, 　　失败:函数(e) {//这个。tableFlag=false 　　alert('请求失败”) 　　console.log('查询失败”) 　　} 　　}) 　　}, 　　找到:函数(){ 　　var _self=这　　_self。发出(“找到”,_self.weekse)美元　　} 　　} 　　} 　　& lt;/script> 　　　　

,在页面刚开始加载时候,通过创建调用了我们的一个方法。发送ajax。获取到下拉框该显示的值。

b,通过给选择绑定一个模型来监视和获取选中后的值。这里是尽管

c,此处第一行选择,我们写了一个固定表头,以下通过选项是通过:创建函数()试页面加载后,立即访问后台,查询数据库,获取的下拉列表值,进行显示。

d,这里的价值值。我们绑定成这条数据对象项。

这里大家肯定会想这不是很简单么?但是这里有一个坑,就是你选取的每一个值都会在下拉框中,显示成最后一个,但是实际值值是你选取的这个对象…看一看,是不是出现了,这个问题。

这个问题出现的原因是,在你选择绑定键和值时。该这些数据中有重复值导致的,造成数据对应不起. .

这个问题我们需要怎么解决呢,选择值为对象类型时,需要提供一个重视关键作为唯一性标识。

e,我们通过监看听咱们选择的模型,在这个监听里面调用一个给父组件传值的方法,将咱们的项目提供给父组件使用。

以上这篇浅谈Vue元素中选择下拉框选取值的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。