vuetifyjs 下拉框VSelect 实现联动
时间: 2023-09-11 18:09:27 浏览: 44
在 Vuetify 中使用 `VSelect` 实现下拉框联动也是非常简单的。
首先,你需要在 data 中定义需要联动的数据列表,如下:
```javascript
data() {
return {
provinces: [
{ value: 'jilin', label: '吉林省' },
{ value: 'liaoning', label: '辽宁省' },
{ value: 'hebei', label: '河北省' }
],
cities: {
'jilin': [
{ value: 'changchun', label: '长春市' },
{ value: 'jilin', label: '吉林市' },
{ value: 'siping', label: '四平市' }
],
'liaoning': [
{ value: 'shenyang', label: '沈阳市' },
{ value: 'dalian', label: '大连市' },
{ value: 'anshan', label: '鞍山市' }
],
'hebei': [
{ value: 'shijiazhuang', label: '石家庄市' },
{ value: 'tangshan', label: '唐山市' },
{ value: 'baoding', label: '保定市' }
]
},
selectedProvince: null,
selectedCity: null
}
}
```
然后,在模板中使用 `VSelect` 组件,如下:
```html
<template>
<div>
<v-select
v-model="selectedProvince"
:items="provinces"
label="省份"
item-text="label"
item-value="value"
@change="onProvinceChange"
></v-select>
<v-select
v-model="selectedCity"
:items="cities[selectedProvince]"
label="城市"
item-text="label"
item-value="value"
></v-select>
</div>
</template>
```
其中,第一个 `VSelect` 组件绑定了 `selectedProvince` 变量,第二个 `VSelect` 组件绑定了 `selectedCity` 变量。同时,第一个 `VSelect` 组件的 `change` 事件监听了省份选择变化的事件,当省份选择变化时,更新第二个 `VSelect` 组件的 `items` 属性,以更新城市选择列表。
最后,在 methods 中定义 `onProvinceChange` 方法,该方法会在省份选择发生变化时被调用,根据选中的省份,更新城市列表数据,如下:
```javascript
methods: {
onProvinceChange() {
this.selectedCity = null // 清空城市选择
}
}
```
这样,就可以实现 `VSelect` 的联动效果了。