el-cascader 需要传给后端编码和城市名字
时间: 2023-08-18 15:18:57 浏览: 44
好的,您可以在`handleChange`方法中获取选择的编码和城市名字,并将其传给后端。例如:
```javascript
handleChange(selectedOptions) {
const code = selectedOptions[selectedOptions.length - 1].code;
const cityName = selectedOptions.map(option => option.name).join('');
// 将编码和城市名字传给后端
axios.post('/your-backend-url', { code, cityName })
.then(res => {
// 处理后端返回的数据
})
.catch(err => {
// 处理请求错误
});
}
```
这里假设您使用了axios库来发送POST请求,您需要将`your-backend-url`替换成您的后端接口地址。另外,如果您需要在请求头中添加一些信息,可以通过axios的config参数来配置。
相关问题
<el-cascader :options="allAreas" v-model="selectedOptions" @change="handleChange" :props="{ label: 'name', checkStrictly: true, value: 'code' }" style="height: 32px; width: 192px" > </el-cascader>需要传给后端编码和城市名字
好的,您需要在`handleChange`方法中获取选择的编码和城市名字,并将其传给后端。您可以使用`selectedOptions`中最后一个元素的`code`属性获取编码,使用`selectedOptions`中所有元素的`name`属性拼接城市名字。例如:
```javascript
handleChange(selectedOptions) {
const code = selectedOptions[selectedOptions.length - 1].code;
const cityName = selectedOptions.map(option => option.name).join('');
// 将编码和城市名字传给后端
// ...
}
```
vue3中el-cascader怎么显示后端返回的集合
在Vue3中,你可以使用`v-model`绑定一个变量来控制`el-cascader`选中的值。如果你的后端返回的集合是一个数组,你可以把这个数组赋值给`v-model`绑定的变量,这样`el-cascader`就会自动更新显示。以下是一个示例代码:
```html
<el-cascader
v-model="selectedValues"
:options="options"
:props="props">
</el-cascader>
```
```javascript
export default {
data() {
return {
selectedValues: [], // 选中的值
options: [ // 级联选择器的选项
{
value: 'zhinan',
label: '指南',
children: [{
value: 'shejiyuanze',
label: '设计原则',
children: [{
value: 'yizhi',
label: '一致'
}, {
value: 'fankui',
label: '反馈'
}]
}]
}
],
props: { // 配置选项的属性
value: 'value',
label: 'label',
children: 'children'
}
}
},
mounted() {
// 从后端获取数据
this.$http.get('/api/cascader').then(res => {
this.selectedValues = res.data; // 把后端返回的值赋给v-model绑定的变量
});
}
};
```
在这个示例中,我们把后端返回的选中的值赋给了`selectedValues`变量,这个变量绑定到了`el-cascader`的`v-model`上,因此`el-cascader`会自动显示后端返回的选中的值。