首页 > 其他分享 >vue el-select/el-cascader获取选中的对象label值

vue el-select/el-cascader获取选中的对象label值

时间:2023-10-13 09:45:21浏览次数:34  
标签:el vue form pathLabels label 获取 cascader

1.el-select获取选中对象label值

  <el-form-item label="车辆配置" prop="sales_name">
    <el-select
      v-if="!showSaleNameInput"
      v-model="form.sales_name"
      clearable
      ref="itemSelect"
      size="mini"
      class="form-item-width"
    >
      <el-option
        v-for="(item, index) in sales_name_list"
        :key="index"
        :label="item.sales_name"
        :value="item.level_id"
      ></el-option>
    </el-select>
  </el-form-item>

获取正常情况下我们通过el-select获取到的值是value对应的code码,如果需要获取label值可以听过下面方式获取

let sales_name = this.$refs.itemSelect.selectedLabel

2.1.el-cascader获取选中对象label值

          <el-form-item
            label="品牌/车系/排量/年款"
            prop="carmodel"
            label-width="120"
            required
          >
            <carmodel-cascader
              style="width: 240px;"
              ref="cascader"
              v-model="form.carmodel"
              placeholder="请选择"
              clearable
              size="mini"
              :level="4"
              @change="handleCarmodelChange"
            ></carmodel-cascader>
          </el-form-item>

听过v-model获取到值的是对应的code码值,如果需要获取label值可以这样获取

    handleCarmodelChange(data) {
      this.form.carmodel = data
      this.form.brand = null
      this.form.series = null
      this.form.displacement = null
      this.form.year = null
      try {
        const checkedNodes = this.$refs['cascader'].$refs[
          'cascader'
        ].getCheckedNodes()
        if (checkedNodes && checkedNodes[0]) {
          const pathLabels = checkedNodes[0].pathLabels
          if (pathLabels) {
            this.form.brand = pathLabels[0]
            this.form.series = pathLabels[1]
            this.form.displacement = pathLabels[2]
            this.form.year = pathLabels[3]
          }
        }
      } catch (error) {}
    },

标签:el,vue,form,pathLabels,label,获取,cascader
From: https://www.cnblogs.com/qqcc1388/p/17761166.html

相关文章

  • 类里面静态方法(@staticmethod),类方法(@classmethod)和实例方法(self)的使用与区别
    前言python类里面常用的方法有3个:静态方法(@staticmethod),类方法(@classmethod)和实例方法(self)本篇讲解这3种方法在使用上有什么区别。函数先从函数说起,方法跟函数是有区别的,经常有人容易混淆,函数定义是def关键字定义(外面没class)deffun():a="hello"returna#......
  • 策略 + 枚举 优雅的消灭 if-else
    可能初学者都会忽略掉一点,其实if-else是一种面向过程的实现。那么,如何避免在面向对象编程里大量使用if-else呢?网络上有很多解决思路,有工厂模式、策略模式、甚至是规则引擎(这个太重了吧)......这些,都有一个共同的缺点,使用起来还是过于繁重了。虽说起到了消除if-else的作用,但是,......
  • elementui表格复杂操作
    1.elementui表格最后一行加粗显示表格table加以下属性:cell-style="cellStyleModify"methods方法实现:cellStyleModify({row,column,rowIndex,columnIndex}){letfontStyle=null;if(row.ggmc.includes('合计')){fontStyle='font-wei......
  • 2. Vue简介
    三大问题(是什么,为什么,怎么办):Vue是帮助前端优化开发的一个工具,是一个框架渐进式框架的概念Vue2-->Vue3......
  • Vue监听路由的变化
    方式一:watch监听通过watch监听,当路由发生变化的时候执行watch:{$route(to,from){console.log(to.path);}},//或者watch:{$route:{handler:function(val,oldVal){console.log(val);},//深度观察监听deep:true}},//......
  • element表格的表头添加*星号
    vue怎么实现element表格里表头信息提示功能?第一、给el-table添加:header-cell-class-name<el-table:header-cell-class-name="func"></el-table>第二、在vue的methods中编写方法//给头部添加星星func(obj){letlist=['表头1','表头2','表头3','......
  • element-ui 解决 table 里包含表单验证
    实际项目中的场景,需要在table里做表单的验证,如图效果: 其实问题关键就在于如何给el-form-item动态绑定prop      :prop="'tableData.'+scope.$index+'.字段名'"   ......
  • 打造炫酷效果:用Java优雅地制作Excel迷你图
    摘要:本文由葡萄城技术团队原创并首发。转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。前言迷你图是一种简洁而有效的数据可视化方式,常用于展示趋势和变化。它通常由一组小型的线条或柱状图组成,用于表示数据的变化情况。迷你图的主要......
  • 突然之间FinalShell连接不上虚拟机了
    问题描述就一直显示unknown设置的主机地址那里;问题解决在本机ping了一下虚拟机,发现没有问题;在虚拟机也ping了一下百度地址,也没问题;就尝试将之前设置的主机地址由快捷名称改成主机ip地址,就又ok了,也不知道为啥突然识别不到设置的快捷名称;......
  • C++程序在debug结果正确但release结果错误或两个模式下结果不同
    今天在运行release工程时发现运行结果出现了-1.#IND00,1.#INF00。但是在debug下可以计算出数字。于是在网上查找资料。尝试修改配置属性优化方法为已禁用。未果尝试修改调试信息格式。未果尝试修改代码生成运行库。未果原因:最后通过输出变量仔细对比发现是某个函......