el-cascader的form表单两级选择传值
时间: 2023-07-27 07:19:11 浏览: 51
如果`el-cascader`只有两级选择,可以使用`change`事件来实现传值。
假设我们的`el-cascader`只有省和市两级选择,我们可以这样绑定:
```
<el-form :model="form">
<el-form-item label="地址">
<el-cascader
:options="options"
:props="props"
@change="handleChange"
:show-all-levels="false">
</el-cascader>
</el-form-item>
</el-form>
```
在这里,我们使用`@change`事件来监听`el-cascader`的选择变化,然后调用`handleChange`方法来传值。
```
methods: {
handleChange(value) {
if (value.length === 2) {
this.form.province = value[0];
this.form.city = value[1];
}
}
}
```
在这里,我们判断选择的值是否有两个,如果有两个,就将第一个值赋给`form.province`字段,将第二个值赋给`form.city`字段。
这样,在提交表单时,就可以直接使用`this.form.province`和`this.form.city`来获取省和市的值了。
相关问题
el-cascader的form表单绑定
要将`el-cascader`绑定到`form`表单中,可以使用`v-model`来绑定表单中的字段,然后在提交表单时获取表单数据即可。
假设我们的表单中有一个`address`字段,我们可以这样绑定:
```
<el-form :model="form">
<el-form-item label="地址">
<el-cascader
:options="options"
:props="props"
v-model="form.address"
:show-all-levels="false">
</el-cascader>
</el-form-item>
</el-form>
```
在这里,我们将`el-cascader`的`v-model`绑定到表单中的`form.address`字段上。
在提交表单时,可以使用`this.$refs.form.validate()`方法来获取表单数据。例如:
```
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
console.log(this.form.address); // 获取地址的值
// 提交表单
}
});
}
}
```
在这里,我们使用`this.$refs.form.validate()`方法来验证表单数据,并在回调函数中获取表单数据。`this.form.address`就是`el-cascader`中选择的地址值。
el-cascader 只显示两级
你可以通过设置 `:show-all-levels` 属性来控制 `el-cascader` 组件显示的级数。将该属性设置为 `false`,即可只显示两级。
以下是一个示例:
```html
<el-cascader :options="options" :show-all-levels="false"></el-cascader>
```
其中,`:options` 是你提供的级联选择器的选项数据。通过将 `:show-all-levels` 设置为 `false`,你可以限制只显示两级。