select，层级选择vue方法

<html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https:

柠檬布丁^O^

2750人浏览 · 2018-05-29 10:28:37

柠檬布丁^O^ · 2018-05-29 10:28:37 发布

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">

<select v-model="provId" @change="onChangeProv">
<option v-for="item in provList" :value="item.value" :disabled="item.value==0">{{item.text}}</option>
</select>

<select v-model="cityId" @change="onChangeCity">
<option v-for="item in cityList" v-if="item.provId===0||provId===item.provId" :value="item.value" :disabled="item.value==0">{{item.text}}</option>
</select>

<select v-model="areaId" @change="onChangeArea">
<option v-for="item in areaLsit" v-if="item.provId===0||(provId===item.provId && cityId===item.cityId)" :value="item.value"
:disabled="item.value==0">{{item.text}}</option>
</select>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
provList: [
{ text: '请选择省份', value: 0 },
{ text: '广东省', value: 1 },
{ text: '广西壮族自治区', value: 2 }
],
cityList: [
{ text: '请选择城市', value: 0, provId: 0 },
{ text: '广州市', value: 1, provId: 1 },
{ text: '深圳市', value: 2, provId: 1 },
{ text: '南宁市', value: 3, provId: 2 },
{ text: '桂林市', value: 4, provId: 2 }
],
areaLsit: [
{ text: '请选择区域', value: 0, cityId: 0, provId: 0 },
{ text: '天河区', value: 1, cityId: 1, provId: 1 },
{ text: '白云区', value: 2, cityId: 1, provId: 1 },
{ text: '宝安区', value: 3, cityId: 2, provId: 1 },
{ text: '龙岗区', value: 4, cityId: 2, provId: 1 },
{ text: '西乡塘区', value: 5, cityId: 3, provId: 2 },
{ text: '青秀区', value: 6, cityId: 3, provId: 2 },
{ text: '象山区', value: 7, cityId: 4, provId: 2 },
{ text: '七星区', value: 8, cityId: 4, provId: 2 }
],
/*初始值*/
provId: 0,
cityId: 0,
areaId: 0
},
/*点击事件*/
methods: {
onChangeProv: function (event) {
this.cityId=0;
this.areaId=0;
},
onChangeCity: function (event) {
this.areaId=0;
},
onChangeArea: function (event) {
console.log(event)
}
}
});
</script>
</body>

</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^