elementui二级联动下拉框
时间: 2023-08-24 10:07:44 浏览: 64
element-ui提供了Cascader(级联选择器)组件来实现二级联动下拉框的功能。你可以按照以下步骤来实现:
1. 首先,安装element-ui库并导入所需的组件:
```bash
npm install element-ui --save
```
```javascript
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
```
2. 在你的Vue组件中使用Cascader组件,并设置相应的数据源和配置项:
```html
<template>
<div>
<el-cascader
v-model="selectedOptions"
:options="options"
@change="handleCascaderChange"
placeholder="请选择"
></el-cascader>
</div>
</template>
<script>
export default {
data() {
return {
selectedOptions: [], // 选择的选项值
options: [ // 数据源
{
value: 'option1',
label: '选项1',
children: [
{
value: 'option1-1',
label: '选项1-1'
},
{
value: 'option1-2',
label: '选项1-2'
}
]
},
{
value: 'option2',
label: '选项2',
children: [
{
value: 'option2-1',
label: '选项2-1'
},
{
value: 'option2-2',
label: '选项2-2'
}
]
}
]
}
},
methods: {
handleCascaderChange(value) {
console.log(value) // 在这里可以获取到选中的值
}
}
}
</script>
```
这样,你就可以实现一个基本的二级联动下拉框了。通过设置`options`属性来定义数据源,通过`v-model`来绑定选择的值,通过`@change`事件来监听值的变化。在`handleCascaderChange`方法中,你可以获取到选中的值并进行相应的处理。
希望这个示例对你有帮助!如有任何问题,请随时追问。