俩个el-select在v-for获取数据后,第一个el-select选择下拉数据后,第二个el-select获取第一个数据进行下拉筛选
时间: 2023-07-24 19:43:27 浏览: 150
可以通过在第一个 `el-select` 的 `change` 事件中更新第二个 `el-select` 的选项来实现。
假设第一个 `el-select` 的选项数据为 `options1`,第二个 `el-select` 的选项数据为 `options2`,则可以在第一个 `el-select` 的 `change` 事件中筛选出符合条件的选项,并更新第二个 `el-select` 的选项数据。代码如下:
```html
<template>
<div>
<el-select v-model="selectedOption1" @change="handleSelect1Change">
<el-option v-for="option in options1" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
<el-select v-model="selectedOption2">
<el-option v-for="option in filteredOptions2" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption1: '',
selectedOption2: '',
options1: [
{ value: '1', label: '选项1' },
{ value: '2', label: '选项2' }
],
options2: [
{ value: 'A1', label: '选项A1', parentId: '1' },
{ value: 'A2', label: '选项A2', parentId: '1' },
{ value: 'B1', label: '选项B1', parentId: '2' },
{ value: 'B2', label: '选项B2', parentId: '2' }
]
}
},
computed: {
filteredOptions2() {
return this.options2.filter(option => option.parentId === this.selectedOption1)
}
},
methods: {
handleSelect1Change() {
this.selectedOption2 = ''
}
}
}
</script>
```
上述代码中,`filteredOptions2` 是一个计算属性,用于筛选出符合条件的选项。在 `handleSelect1Change` 方法中,将第二个 `el-select` 的选中项清空,以便在更新选项时能够正确判断。
阅读全文