在同一个页面多次调用el-select选择器
elementui是一个十分好用的组件库,但毕竟也不能做到面面俱到,有些还是要根据根据自己的实际需求做一些自定义的方法。
比如el-select选择器在同一个页面使用多次的话就会造成选择一个另一个也会跟着变化的情景,解决方法其实也很简单,但还是弄不懂,其实就是把v-model及绑定的数据换一下就可以了,还是看着代码比较明显,下面一起看一下吧
<div class="skucost-top">
<div class="skucost-top-first">
<span>城市</span>
<el-select v-model="selectfloor.floorname" placeholder="请选择">
<el-option
v-for="item in selectfloor"
:key="item.floorid"
:label="item.floorname"
:value="item.floorid"
></el-option>
</el-select>
</div>
<div class="skucost-top-first">
<span>机构名称</span>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
</div>
html代码如上所示,写了两个选择器,然后把里面的数据名称等换了一下,再看一下data 中的return的值吧
data() {
return {
selectfloor:[
{
floorid:'',
floorname:'魁拔'
},{
floorid:'',
floorname:'海问香'
},
{
floorid:'',
floorname:'幽冥狂'
},
],
options: [
{
value: "选项1",
label: "黄金糕"
},
{
value: "选项2",
label: "双皮奶"
},
{
value: "选项3",
label: "蚵仔煎"
},
{
value: "选项4",
label: "龙须面"
},
{
value: "选项5",
label: "北京烤鸭"
}
],
value: "",
}
}
如果是自己的测试数据要注意不管是floorid还是value都不能相同,不过一般都是从后台取数据也不会有这个问题了,在上面的代码插入到页面中就能完美的实现在同一个页面多次使用el-select选择器了,图示如下:
希望能够对你有帮助,有问题的可以在下方留言,也不要吝啬你的关注呦
在同一个页面多次调用el-select选择器的更多相关文章
- 自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个
自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个,兼容ie8以上浏览器,别忘了引用jquery,我用的jquery/1.11.0/其他版本没有测试,另外需 ...
- asp.net mvc jqgrid 同一个页面查询不同的表,jqgrid显示不同表的表头和数据并且分页
基于我上一篇文章<a href="http://www.cnblogs.com/alasai/p/4765756.html">asp.net mvc excel导入&l ...
- vue通过ID(参数)修改URL复用同一个页面(组件)不重新加载的问题
项目中经常会用到同一个页面,结构是相同的,我只是在vue-router中通过添加参数的方式来区分状态,参数可以在页面跳转时带上params,或者query,但是有一个问题,即使我们修改了参数,URL也 ...
- JS-【同页面多次调用】tab选项卡封装
这两天遇到一个页面,同一个页面中同一个特效会用好多次,比如tab,比如轮播等.我又不想很不负责任的复制一遍代码,那样页面臃肿,自己心里也堵得慌.于是就想着把代码封装起来多次调用. 对于封装,只在公开课 ...
- Java实现:服务端登录系统并跳转到系统内的指定页面(不调用浏览器)
Java实现:服务端登录系统并跳转到系统内的指定页面(不调用浏览器) 1,思路:根据爬虫思想: 2,代码: /** * ClassName:AuthFr * Function: TODO * Reas ...
- 在同一个页面使用多个不同的jQuery版本,让它们并存而不冲突
- jQuery自诞生以来,版本越来越多,而且jQuery官网的新版本还在不断的更新和发布中,现已经达到了1.6.4版本,但是我们在以前的项目中就已经使用了旧版本的jQuery,比如已经出现的:1.3 ...
- Iframe父页面与子页面之间的调用
原文:Iframe父页面与子页面之间的调用 Iframe父页面与子页面之间的调用 专业词语解释如下: Iframe:iframe元素是文档中的文档. window对象: 浏览器会在其打 ...
- 完美实现在同一个页面中使用不同样式的artDialog样式
偶然发现artDialog.js这个插件,就被其优雅的设计及漂亮的效果深深吸引,在做例子时碰到了一些想当然它应该提供但却没有提供的功能,不过这都不影响我对它的喜爱,下面说一下遇到的问题吧! artDi ...
- 多个测试类 只使用同一个浏览器,同一个driver对象, 或者同一个页面的对象
如果是:多个测试类 只使用同一个浏览器,同一个driver对象, 或者同一个页面的对象,只需要:1. 创建一个基本的测试类(BaseTest),具有一个公共静态的driver属性, public st ...
随机推荐
- [NOI2010]超级钢琴 倍增
[NOI2010]超级钢琴 倍增 题面 暴力:枚举区间丢入堆\(O(n^2logn)\) 正解:考虑每次枚举和弦起点\(s\),那么以\(s\)为起点的和弦为\(sum[t]-sum[s](s+L-1 ...
- Shadows 使用说明
1:下载最新版 Windows地址:点击下载 Mac地址:点击下载 2:Windows安装插件(点击下方插件名即可下载) .NET Framework 4.7.2和 Microsoft Visual ...
- PHP全栈学习笔记23
php,基础,流程控制,函数,字符串,数组,web交互,mysql数据库,PHP数据库编程,cookie与session,日期和时间,图形图形处理,文件和目录处理,面向对象,pdo数据库抽象层,sma ...
- manjaro 滚动更新后无法开机,Failed to start load kernel modules,nvidia驱动导致
今天滚动后无法开机,启动时显示Faild to start load kernel modules,卡在后面无法进入登录界面 systemctl status systemd-modules-load ...
- P3239 [HNOI2015]亚瑟王——概率DP
题面:亚瑟王 最近考试考期望很自闭啊,没做过这种类型的题,只能现在练一练: 所谓期望,就是状态乘上自己的概率:对于这道题来说,我们要求的是每张牌的伤害乘上打出的概率的和: 当然不是直接乘,因为给的是每 ...
- Echart-无需json文件的树状图(源码)超级简单,小白的福音
源码: <!DOCTYPE html> <head> <meta charset="utf-8"> <script type=" ...
- elasticsearch bootstrap.memory_lock
检查bootstrap.memory_lock设置是否生效 get http://10.127.0.1:9200/_nodes?filter_path=**.mlockall 响应: { " ...
- 《Glibc内存管理》笔记DAY4
目录 分箱式内存管理 Small bins Large bins 内容来源 分箱式内存管理 对于空闲的 chunk,ptmalloc 采用分箱式内存管理方式,根据空闲 chunk 的大小和处于的状 ...
- java定时案例
好久没写笔记了,变懒了! java定时运行的三个案例: 一, 通过sleep方法来达到定时任务的效果 public class testTime { public static void main(S ...
- OpenVirtex安装
目录 环境 安装 环境 我使用的java以及maven版本如下: jdk7下载地址:https://www.oracle.com/technetwork/java/javase/downloads/j ...