elementplus 多级select
时间: 2023-12-03 10:40:51 浏览: 27
Element Plus是一款基于Vue.js 2.0的桌面端组件库,它提供了多种常用组件,包括多级select组件。下面是一个多级select的示例代码:
```html
<template>
<div>
<el-select v-model="value1" placeholder="请选择" @change="handleChange1">
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-select v-model="value2" placeholder="请选择">
<el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
value1: '',
value2: '',
options1: [
{
value: 'beijing',
label: '北京'
},
{
value: 'shanghai',
label: '上海'
}
],
options2: []
}
},
methods: {
handleChange1(value) {
if (value === 'beijing') {
this.options2 = [
{
value: 'chaoyang',
label: '朝阳区'
},
{
value: 'haidian',
label: '海淀区'
}
]
} else if (value === 'shanghai') {
this.options2 = [
{
value: 'pudong',
label: '浦东新区'
},
{
value: 'minhang',
label: '闵行区'
}
]
}
}
}
}
</script>
```
在这个示例中,我们使用了两个el-select组件,第一个组件的选项是固定的,而第二个组件的选项是根据第一个组件的值动态生成的。当第一个组件的值发生变化时,我们通过handleChange1方法动态生成第二个组件的选项。具体实现方式是根据第一个组件的值判断应该生成哪些选项,然后将这些选项赋值给options2数组即可。