element-ui select 二级联动 在使用select 选择框时,选择第一个框的内容后,根据第一个框不同内容,展示第二个框里对应的内容,代码展示
时间: 2023-02-13 07:42:16 浏览: 126
Element-ui中 选择器(select)多选下拉框实现全选功能.zip
好的,我来为您解释一下如何在 element-ui 的 select 选择框中实现二级联动的功能。
首先,您需要定义两个 select 选择框,分别用来作为第一个和第二个联动框。
然后,您可以在第一个 select 选择框上绑定 change 事件,并在 change 事件处理函数中,根据第一个 select 选择框的选择值来获取对应的第二个 select 选择框的内容,并将获取到的内容赋值给第二个 select 选择框的 options 选项。
具体的代码实现可以参考下面的示例:
```
<template>
<div>
<!-- 第一个 select 选择框 -->
<el-select v-model="selectedFirstOption" @change="handleFirstOptionChange">
<el-option v-for="option in firstOptions" :key="option.value" :label="option.label" :value="option.value"></el-option>
</el-select>
<!-- 第二个 select 选择框 -->
<el-select v-model="selectedSecondOption" :options="secondOptions"></el-select>
</div>
</template>
<script>
export default {
data() {
return {
// 第一个 select 选择框的内容
firstOptions: [
{ label: '选项1', value: 1 },
{ label: '选项2', value: 2 },
{ label: '选项3', value: 3 },
],
// 第一个 select 选择框的选择值
selectedFirstOption: '',
// 第二个 select 选择框的内容
secondOptions: [],
// 第二个 select 选择框的选择值
selectedSecondOption: '',
}
},
methods: {
// 第一个 select 选择框的 change 事
阅读全文