在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 相关文章推荐
JQuery 学习笔记 选择器之一
Jul 23 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
d3绘制基本的柱形图的实现代码
Dec 12 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 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
PHP 和 COM
2006/10/09 PHP
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
php数组冒泡排序算法实例
2016/05/06 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
探讨js中的双感叹号判断
2013/11/11 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
JavaScript制作颜色反转小游戏
2016/09/25 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
PHP7新特性简述
2017/06/11 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
Vue项目中配置pug解析支持
2019/05/10 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
jquery实现简易验证插件封装
2020/09/13 jQuery
python实现udp数据报传输的方法
2014/09/26 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
python实现视频分帧效果
2019/05/31 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
银行学习十八大感想
2014/01/11 职场文书
优良学风班总结材料
2014/02/08 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
优秀班组长事迹
2014/05/31 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
浅谈python数据类型及其操作
2021/05/25 Python
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技