<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<el-select v-model="province" placeholder="请选择" @change="selectChange">
<el-option v-for="item in compony" :key="item.code" :label="item.name" :value="item.code">
</el-option>
</el-select>
<el-select v-model="city" placeholder="请选择">
<el-option v-for="item in newCity" :key="item.code" :label="item.name" :value="item.code">
</el-option>
</el-select>
</div>
<script>
let vm = new Vue({
el: '#app',
data() {
return {
province:"",
city:"",
newCity:[],
compony: [{
"code": 1,
"name": '区域1',
"childrens": [{
"code": 01,
"name": '广东'
},{
"code": 02,
"name": '江西'
}],
 
},
{
"code": 2,
"name": '区域2',
"childrens": [{
"code": 03,
"name": '北京'
},{
"code": 04,
"name": '东'
}
],
 
}]
}
},
methods: {
selectChange(value){
console.log(value);
this.newCity = this.compony[value-1].childrens
this.city = this.newCity[0].name
console.log(this.newCity[0],'newcity')
 
}
}
})
</script>
</body>
</html>

vue elementui二级联动下拉选项demo的更多相关文章

  1. (实用篇)jQuery+PHP+MySQL实现二级联动下拉菜单

    二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动.本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果. 先看下效果 大类:  前端技术 ...

  2. jQuery实现的3个基础案例（仿QQ列表分组，二级联动下拉框，模拟员工信息管理系统）

    1.仿QQ列表分组 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...

  3. jq实现简单的二级联动下拉框

    1 效果图 2 html <!DOCTYPE html> <html lang="en"> <head>     <meta charse ...

  4. vue 获取数据联动下拉框select ，并解决报Duplicate value found in v-for="...": "". Use track-by="$index" 错误

    公司项目中遇到一个问题,联动下拉框,并且数据是使用vue-resource从后台获取的,格式不利于输出联动下拉框,联动下拉框是第一个下拉框输出一个数组里每一项json的一个text值,从而第二下拉框输 ...

  5. ajax 多级联动 下拉框 Demo

    写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...

  6. vue day3 bootstrap 联动下拉

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...

  7. asp怎么实现二级联动下拉菜单

    rs为一级栏目的记录集 rs2为二级栏目的记录集 分别替换成你自己的记录集名称就好了 <script language="JavaScript"> var onecou ...

  8. Excel下拉选项二级联动

    在日常工作中,难免遇到操作excel的时候,二级联动下拉选项多用于像地市区县的应用场景 1)先把要联动的内容准备好,把它放到第二个sheet页中 2)操作级联的文本 全部选中之后,Ctrl+G -- ...

  9. Vue.js组件之联动下拉框

    Html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

随机推荐

  1. 写几个简单用artTemplate的例子

    写几个简单的artTemplate的例子,很多框架都有自己的模板(template),没得时候,可以利用artTemplate.js完成 html文件是: <!DOCTYPE html> ...

  2. win下安装wget以及使用wget

    1. 安装wget网址:http://gnuwin32.sourceforge.net/packages/wget.htm下载http://downloads.sourceforge.net/gnuw ...

  3. Lua 数学类

    数学类主要有Vec2(坐标向量).Size(尺寸).Rect(矩形). 创建 在Lua中创建的 Vec2.Size.Rect 都是一个table类型. 其中只有相应的成员变量,没有相关的函数运算. c ...

  4. 资料：mnist.pkl.gz数据包的下载以及数据内容解释

    deeplearning.net/data/mnist/mnist.pkl.gz The MNIST dataset consists of handwritten digit images and ...

  5. oracle同一个库上面，不同用户相互赋予权限

    用法: 有两个用户:user1和user2,都是在库TEST上,分别有表user1.table1,user2.table2 但是用user1登录的时候,user2上表就不能用,此时就可以使用grant ...

  6. U盘中了磁碟机病毒怎么办

    问题: U盘在中毒了的电脑上使用后,里面的文件夹均消失了,这是因为里面的文件夹属性被改为隐藏属性.通过查看显示隐藏文件夹发现,所有隐藏了的文件夹的隐藏属性被锁定,无法通过鼠标右键查看文件夹属性的方法改 ...

  7. 20145321 《Java程序设计》第8周学习总结

    20145321 <Java程序设计>第8周学习总结 教材学习内容总结 第十五章 时间与日期 15.1 日志 1.使用日志的起点是Logger类,要取得Logger类,必须使用Logger ...

  8. 百度console输出

    try{ if(window.console&&window.console.log) { console.log("一张网页,要经历怎样的过程,才能抵达用户面前?\n一位新 ...

  9. MysQL使用一创建库与表

    数据库简介 人类在进化的过程中,创造了数字.文字.符号等来进行数据的记录,但是承受着认知能力和创造能力的提升,数据量越来越大,对于数据的记录和准确查找,成为了一个重大难题 计算机诞生后,数据开始在计算 ...

  10. KVM配置及维护

    kvm使用场景 1.公司测试环境/开发环境 测试开发环境可以使用配置低点的物理机就可以 2.公司生产环境 一般小公司没有私有云或容器团队,运维人员可能就1-2个,然后公司也不舍得花钱买商业化的私有云. ...