javascript - element-ui 如何获取select组件的label值?
曾经蜡笔没有小新
曾经蜡笔没有小新 2017-06-12 09:29:43
0
3
1909


1、如图所示: 下拉选中202, 组件的change事件打印出来的是value值(就是下面打印出来的),但我现在只想获取202(这是赋值在label属性中的)这个值,不想获取下面打印出来的值,如何解决? 谢谢了,被这个问题烦住了。

曾经蜡笔没有小新
曾经蜡笔没有小新

全部回复(3)
阿神

你的select,是数组对象(不重复的)形式循环渲染出来的。所以可以只需操作数据形式求得,
添加@change="changeValue"

用Array find方法用对象的属性查找数组里的对象即可

changeValue(value) {
    console.log(value);
      let obj = {};
      obj = this.options.find((item)=>{
          return item.value === value;
      });
      console.log(obj.label);
}
具体demo如下:
// html
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.3.5/lib/index.js"></script>
<p id="app">
<template>
  <el-select v-model="value" placeholder="请选择" @change="changeValue">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
    </el-option>
  </el-select>
</template>
</p>
// js
var Main = {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor({
    methods:{
          changeValue(value) {
            console.log(value);
          let obj = {};
          obj = this.options.find((item)=>{
              return item.value === value;
          });
          console.log(obj.label);
        }
  }
}).$mount('#app')
@import url("//unpkg.com/element-ui@1.3.5/lib/theme-default/index.css");

可以拷贝到这个地址运行下即可

曾经蜡笔没有小新

标签(ref="xxx" data="56")

this.$refs.xxx.getAttribute('data')

typecho

你把label和value反过来试一试,不谢~

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!