在Vue中使用Select选择器拼接label的操作


Posted in Javascript onOctober 22, 2020

我就废话不多说了,大家还是直接看代码吧~

<el-form-item label="货道商品" prop="productid">
          <el-select v-model="form.productid" filterable placeholder="请选择" @change="changeselect">
            <el-option v-for="item in myproducts"
                  :key="item.Id"
                  :label="`${item.Name}/${item.Brand}/${item.Type}/${item.Spec}`"
                  :value="item.Id">
            </el-option>
          </el-select>
        </el-form-item>

正常使用方法:

:label=“item.label”

多个字段拼接:

:label="${item.Name}/${item.Brand}/${item.Type}/${item.Spec}"

补充知识:element el-select 动态创建绑定属性,视图不更新之-连环填坑

项目需求是这样的:

1. 在 a组件通过操作页面,请求拿到需要的data,然后将数据存在vuex 中,数据结构为多层嵌套结构大概如下

ceshi:[
  {
   values:[
    {
     value:[
      {id:1,label:'哈哈1'},
      {id:2,label:'哈哈2'},
      {id:3,label:'哈哈3'}
     ]
    },
    {
     value:[
      {id:4,label:'哈哈4'},
      {id:5,label:'哈哈5'},
      {id:6,label:'哈哈6'}
     ]
    }
   ]
  }
 ]

在组件中通过获取vuex中的数据ceshi为数据源,

computed: {
  ...mapGetters(['ceshi'])
 },

然后在b组件中动态渲染数据,因为我需要动态绑定属性所以我在computed中创建动态变量结构

//数据渲染
  <div v-for="(x1,index1) in ceshi" :key="index1+'1'">
   <div v-for="(x2,index2) in x1.values" :key="index2+'2'">
     <el-select placeholder="请选择" v-model="form[index1].values[index2].value"> //动态绑定属性
      <el-option
       v-for="item in x2.value"
       :key="item.id"
       :label="item.label"
       :value="item.id">
      </el-option>
     </el-select>
   </div>
  </div>
//  

computed: {
  ...mapGetters(['ceshi']),  
   form(){   
    return this.ceshi.map((val,index) => {
     let values = val.values.map((val,index) => {
      let json={value:""}
      return json
     })
     let ojson = {values};
     return ojson
    })
   }  
 }

发现数据绑定成功,选择框变化数据也会变化,但是页面不改变,视图没有更新,通过在select代码中加入$set方法,也并没有用,视图同样没有更新;查看文档发现发现computer默认没有双向绑定 ,默认为getter 需要自己写setter函数,但是我发现,因为我的动态数据是我通过vuex 中的数据得来的,我也并没有定义其他的data,所以无法使用setter,于是进行修改如下

data() {
  return {
   form:[]
 },
created () {
   this.ceshi.forEach((val,index) => {
    let values = val.values.map((val,index) => {
     let json={value:""}
     return json
    })
    let ojson = {values};
    this.form.push(ojson)
   })  
 }

结果报错,分析原因应该是,我并没有在a组件操作获取数据,但这个时候created函数运行于是报错了,修改逻辑为通过watch 监听ceshi 数据变化

ceshi: {
   handler(newValue,oldValue) {
    this.ceshi.forEach((val,index) => {
      let values = val.values.map((val,index) => {
       let json={value:""}
       return json
      })
      let ojson = {values};
      this.form.push(ojson)
     })
   },
   deep: true
  }

再看效果,发现解决了,记录如下,希望能帮助到您!

以上这篇在Vue中使用Select选择器拼接label的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
Mar 06 Javascript
js实现的切换面板实例代码
Jun 17 Javascript
js中Image对象以及对其预加载处理示例
Nov 20 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 #Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 #Javascript
jquery实现抽奖功能
Oct 22 #jQuery
Vue实现简单的留言板
Oct 23 #Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
Oct 22 #Javascript
JavaScript实现简易计算器小功能
Oct 22 #Javascript
vue实现简单加法计算器
Oct 22 #Javascript
You might like
自动分页的不完整解决方案
2007/01/12 PHP
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
python如何对链表操作
2020/10/10 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
外贸销售员求职的自我评价
2013/11/23 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
个人求职信格式范文
2015/03/20 职场文书
公司慰问信范文
2015/03/23 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang