-怎么绑定两个el-select,选择一个时另外一个也会出现对应的数据,怎么实现
时间: 2024-02-01 17:15:39 浏览: 29
你可以使用 `watch` 监听第一个 `el-select` 的选中值,当选中值发生变化时,再更新第二个 `el-select` 的选项。具体实现步骤如下:
1. 在第一个 `el-select` 中绑定 `v-model`,并设定选项的值和标签:
```html
<el-select v-model="selectedValue">
<el-option v-for="(item, index) in options" :key="index" :value="item.value" :label="item.label"></el-option>
</el-select>
```
2. 在第二个 `el-select` 中同样绑定 `v-model`,但是不需要设置选项:
```html
<el-select v-model="selectedValue2"></el-select>
```
3. 在 `watch` 中监听第一个 `el-select` 的选中值,当选中值变化时,更新第二个 `el-select` 的选项:
```javascript
watch: {
selectedValue: function(val) {
// 根据选中值更新第二个 el-select 的选项
this.selectedValue2Options = this.options.filter(item => item.value === val)[0].options;
}
}
```
4. 在 `data` 中定义选项数据和选中值的初始值:
```javascript
data() {
return {
options: [
{ value: '1', label: '选项1', options: ['选项1-1', '选项1-2'] },
{ value: '2', label: '选项2', options: ['选项2-1', '选项2-2'] },
{ value: '3', label: '选项3', options: ['选项3-1', '选项3-2'] }
],
selectedValue: '',
selectedValue2: '',
selectedValue2Options: []
}
}
```
这样,当你在第一个 `el-select` 中选择一个选项时,第二个 `el-select` 就会根据对应选项的 `options` 属性更新选项。