在Vue中使用iview的Select控件实现一个多级选项列表
前言
今天项目要实现一个多级选项列表,发现iview官网上没有写这个例子,于是自己就实现了,如果对你有帮助请点个赞 ‘ * ’!!
解决方法:下面我们就来使用V-for 来定义一个二级选项列表 ,代码如下:
<Select>
<OptionGroup v-for="(group,index) in parentlist" :key="group.id" :label="group.name">
<Option v-for="(item,index) in group.childrenode" :value="item.id" :key="item.id">{{ item.name }}</Option>
</OptionGroup>
</Select> //Vue页面内中使用ts代码
<script lang="ts">
get parentlist(){
var parentlist=[{
id:1,
name:"parent1",
childrenode:[{
id:101,
name:"子1"
},{
id:102,
name:'子1-2
'
}]
},{
//....父2....
},{//...父3 ..}
];
return parentlist;
}
</script>
实现效果:
在Vue中使用iview的Select控件实现一个多级选项列表的更多相关文章
- 在IE8中使用padding设置select控件文字垂直居中
在火狐.苹果.谷歌.欧鹏等主流浏览器中,select下拉表单的文字能够垂直居中,如图: 而在ie8中,select下拉表单的文字基本就是靠底部显示,如图: 那么,如何使得ie8下的select文字垂直 ...
- VUE中实现iview的图标效果时遇到的一个问题
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available ...
- vue和bootstrap的select控件貌似有冲突?
貌似vue和bootstrap的select控件会冲突,因为bootstrap的select控件会将option替换为<a>标签,这样就会导致vue渲染失败.(这个问题让我整了一个上午,最 ...
- .net获取select控件中的文本内容
.net获取select控件中的文本内容 2009-11-28 21:19小V古 | 分类:C#/.NET | 浏览1374次 <select id="SecType" st ...
- 基于vue.js实现远程请求json的select控件
基本思路 前端把需要的参数类型编码传到后台,后台返回相应的参数列表json,前端利用vue渲染select控件 具体实现 前端代码 <select v-model="template. ...
- 自定义HTML中select控件
HTML中默认的select控件比较难看,大家可以参考,本文提供一种解决思路,当然也可以用CSS实现. function selectInit(tid,isIn){ if(!$("#&quo ...
- SELECT控件操作的JS代码示例
SELECT控件操作的JS代码示例 1 检测是否有选中 if(objSelect.selectedIndex > -1) { //说明选中 } else { //说明没有选中 } 2.动态创建s ...
- 在WebBrowser中通过模拟键盘鼠标操控网页中的文件上传控件(转)
引言 这两天沉迷了Google SketchUp,刚刚玩够,一时兴起,研究了一下WebBrowser. 我在<WebBrowser控件使用技巧分享>一文中曾谈到过“我现在可以通过WebBr ...
- IE6下div层被select控件遮住的问题解决方法
Select在IE6下是处于最顶层的,因此想要遮住它,设置zIndex属性是不行的,就需要一个优先级更高的元素,就是iframe,当把iframe嵌套在弹出div层中后,把iframe设置为不可见,但 ...
随机推荐
- 选择排序(C++,Java,Python实现)
排序算法之选择排序,选择排序,选择排序的基本思想描述为:每一趟在n-i+1(i=1,2,-,n-1)个记录中选取关键字最小的记录作为有序序列中第i个记录.具体来说,假设长度为n的数组arr,要按照从小 ...
- 听说你想要部署 Octopress?满足你
Octopress 是一个面向开发者的博客系统,广受程序员的喜爱.既然大家有需求,那么 Octopress 也要安排上~ 云开发(CloudBase)是一款云端一体化的产品方案 ,采用 serverl ...
- 并查集---体会以及模板&&How Many Tables - HDU 1213
定义&&概念: 啥是并查集,就是将所有有相关性的元素放在一个集合里面,整体形成一个树型结构,它支持合并操作,但却不支持删除操作 实现步骤:(1)初始化,将所有节点的父亲节点都设置为自己 ...
- Docker-Bridge Network 02 容器与外部通信
本小节介绍bridge network模式下,容器与外部的通信. 1.前言2.容器访问外部2.1 访问外网2.2 原理2.3 一张图总结2.4 抓包3.外部访问容器3.1 创建nginx容器并从外部访 ...
- Os-Hax: 1 靶机记录
靶机地址:172.16.1.197 Kali地址:172.16.1.108 1 信息搜集 靶机首页 相关信息查看 端口扫描: 开放22和80 目录扫描: 访问http://172.16.1.197/c ...
- Jwt认识与攻击
今天看到2018强网杯的题目,因此总结一下. Json Web Token Json Web Token简称jwt 那么怎么样可以让HTTP记住曾经发生的事情呢? 这里的选择可以很多:cookie,s ...
- css: scroll-table
.scroll-table { table tbody { display: block; max-height: 120px; overflow-y: scroll; } table thead,t ...
- TensorFlow的模型保存与加载
import os os.environ['TF_CPP_MIN_LOG_LEVEL'] = '2' import tensorflow as tf #tensorboard --logdir=&qu ...
- INDIRECT函数实现动态图表的跨数据抓取
涉及函数: indirect函数:通常有两种用法.直接指定单元格地址和隐式指定单元格地址.直接指定:=indirect("A4"),则会返回A4单元格所显示的内容.参数给定的既是字 ...
- Metasploit学习笔记(一)
1.更新 apt-get update:更新源 apt-get upgrade:更新软件包 apt-get dist-upgrade:升级系统 2. Metasploit基础 2.1专业名词 Auxi ...