在使用element ui时 select组件获取label问题

最近在工作的时候需要实现多个条件联合查询,这个其实就是一条sql语句。但是,我们数据库中存储的是根据前端传来id的值所对应的值,而不是直接存的id,使用select组件时,却只能取到value值,无法作为后台查询的条件。

我们需要的是select 组件的label值,而不是看不见的value值。

首先,根据element ui select组件使用手册,给组件添加‘change‘方法

1 @change=changeValue

再根据Array 的 find方法找出对应的值即可。

1 changeValue(value) {
2     console.log(value);
3       let obj = {};
4       obj = this.options.find((item)=>{
5           return item.value === value;
6       });
7       console.log(obj.label);
8 }

这里需要注意的是,code中‘this.options‘代表的是你需要获取label值的数组,‘item.value‘的‘value‘代表的是你数组中跟label对应的遍历的属性名。最后返回的item就是找到的对象。哦,还有就是‘obj.label‘的是数组中对应的显示的属性名。

小白勿喷~

参考文章:https://segmentfault.com/q/1010000009693531/a-1020000009696270

时间: 2024-12-23 13:38:08

在使用element ui时 select组件获取label问题的相关文章

vue+element UI实现分页组件

1.前言 在web页面中,常常需要将后台查询到的数据以表格形式展示出来,而这些数据量往往会非常庞大,如果将所有要展示的数据一次性请求获取并展示到页面上,那页面长度势必会变得非常的长,很不美观.更重要的是,如果数据量过于大,在页面加载时一次性请求全部数据将会耗费大量网络资源,性能极低.但是,如果我们可以将数据分页展示,这样页面首先不会变的冗长,另外只有用户点击页码才会发出请求并且每次请求的数据量也不会很大,这就极大的节省了网络资源,提高了性能.本文就以vue结合element UI实现一个数据分页

饿了么Element UI之Upload组件图片上传【原创】

图片文件换汤不换药,只要注意前端的写法即可 1.饿了么组件可以利用 http-request 的属性对上传进行自定义 :http-request="uploadFile" 2.设置文件FormData对象传入请求 const formdata = new FormData(); const file = params.file; formdata.append("file", file); 3.全部代码 <template> <div style=

Element ui 的树形组件使用的 jsx 写法无法运行。

传统后台开发人员.最近写管理后台使用了element-ui .在tree这这个组件的自定义节点上碰到问题了.官方文档在这里:http://element-cn.eleme.io/#/zh-CN/component/tree源代碼: 文档提示: 使用render-content指定渲染函数,该函数返回需要的节点区内容即可.渲染函数的用法请参考 Vue 文档.注意:由于 jsfiddle 不支持 JSX 语法,所以本例在 jsfiddle 中无法运行.但是在实际的项目中,只要正确地配置了相关依赖,就

element ui dialog 父子组件传值

最近在做课设的时候?用到了Elementui?中的dialog的组件,但在将dialog作为一个子组件的时候,传值出现了问题.当关闭dialog的时候应该怎么传值? ? 一开始的时候的想法比较简单,就是父组件直接传值来作为子组件的show/hidden的值. 然而这样的问题是当子组件close的时候,他会直接直接改变他的值,但是子组件不能直接改变props的值,因此可以通过子组件触发事件给父组件. ? 子组件在关闭时候的事件,通过阅读官方文档,我们发现他提供了一个关闭的时候的回调事件. 我们可以

vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、一级mockjs用法、路由懒加载三种方式

不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p>Element UI简单Cascader级联选择器使用</p> <el-cascader :options='options' v-model="selectedOptions" @change="handleChange"> </el-

element ui 表格提交时获取所有选中的checkbox的数据

<el-table ref="multipleTable" :data="appList" @selection-change="changeFun"> <el-table-column type="selection" width="55" class="selection" prop='uuid' :selectable='checkboxInit' @select

quasar框架引入element ui 组件

在使用quasar 框架时,不能满足部分需求,例如quasar不支持级联组件.table树形数据,因此引入element ui插件 .一直以为在quasar项目中执行:npm i element-ui -S然后在main.js中全局引入:,然而并不是~,这样引入使用element ui组件时会报组件未定义的"错误!",quasar 的全局配置是boot目录下,如下:查看quasar的CLI文档:正确的写法:配置完毕!!! 原文地址:https://blog.51cto.com/1356

vue组件样式添加scoped属性之后,无法被父组件修改。或者无法在本组件修改element UI样式

在vue开发中,需要使用scoped属性避免样式的全局干扰,但是这样在父组件中是无法被修改的,不仅如此如果项目中用了UI框架比如element Ui,这个时候在本组件也无法修改样式,因为权重问题.但是想要修改还是有方法的: 1. 在不去掉scoped的情况下,在全局样式中覆盖,这种解法,有弊端,可能会污染全局样式. 2. 如果项目用到了预处理器,可以通过vue-loader提供的新写法 vue-loader 写法如下: <style scoped> .a >>> .b { /

如何在vue项目中引入element ui组件

(1)安装element ui,即: npm i element-ui -S 然后在项目中的node_modules目录下查看是否有element-ui文件夹,如果有说明安装成功了: (2)引入element ui 在main.js中引入element ui,即: 1 import ElementUI from 'element-ui' 2 import 'element-ui/lib/theme-chalk/index.css' 3 Vue.use(ElementUI) [注意红色部分,以前是