vue elementui二級聯動下拉選項demo
阿新 • • 發佈：2018-06-22
itl sel 組件 style -c chan lang new 區域
<!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>
<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