ElemetUI获取select单选多选,级联选择器label文字

使用Element的时候,组件并没有提供select下拉和级联选择器获取选中value对应的label的方法,不过我们可以通过获取组件对象然后拿到对应的label

在select组件上绑定一个ref

<el-select v-model="form.settleNo"
         ref="settleName"
         @focus="getAllSupplier"
         @change="settleNoChange"
         :loading="loading.supplier"
         filterable
         size="small"
         placeholder="结算对象">
<el-option v-for="item in supplierList"
           :label="item.name"
           :key="item.supplierNo"
           :disabled="!item.id"
           :value="item.supplierNo"></el-option>
</el-select>
组件 对应的字段 类型
cascader级联 单选 this.$refs.xxx.currentLabels 数组
cascader级联 多选 this.$refs.xxx.checkedNodes 数组,遍历查找,label和value就是要的结果,看下面截图就明白
select 单选 this.$refs.xxx.selectedLabel 字符串
select 多选 this.$refs.xxx.selected VueComponent,数组,遍历查找,currentLabel和currentValue就是对应的label和value

其中select多选和级联多选略微麻烦一点,需要遍历,不过根本不算什么难事

级联多选

image.png

再比如radio,checkbox组,有机会可以多试试直接获取组件对象,没准也有惊喜?

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").cha...
    owen_he阅读 7,347评论 0 3
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 7,846评论 1 18
  • 3. JSX JSX是对JavaScript语言的一个扩展语法, 用于生产React“元素”,建议在描述UI的时候...
    pixels阅读 7,913评论 0 24
  • 获取input的checked值是否为true: 第一种: if($("input[name=item][valu...
    西门小妖阅读 5,434评论 0 5
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 8,673评论 1 41