<el-form-item label="公司所在城市变更后:"> <el-select v-model="list.vg_cityidname" placeholder="请选择" @change="districtData(list.vg_cityidname)" clearable> <el-option v-for="item in getCity" :key="item.vg_cityid" :label="item.vg_name" :value="item.vg_cityid" /> </el-select> </el-form-item> 如果当前选择项发生变化就把id传过去,但v-model绑定了一个初始值,这个初始值是一个name,如果不修改直接提交就会报错
时间: 2024-02-14 09:21:16 浏览: 21
这段代码是一个基于 Element UI 的表单组件,其中包含一个下拉选择框(el-select),通过 v-model 绑定了一个名为 list.vg_cityidname 的变量,表示选择框当前选中的城市名称。当选择框的选项发生变化时,通过 @change 事件触发 districtData 方法,并将当前选中的城市 id 作为参数传递给该方法。
由于 v-model 绑定的是 list.vg_cityidname 变量,而不是城市 id,如果直接提交表单,会将城市名称作为参数传递给后台,导致报错。因此,在提交表单前需要将 list.vg_cityidname 转换为对应的城市 id,或者更改 v-model 绑定的变量为城市 id。
相关问题
<el-card shadow="never"> <el-divider content-position="left"><h3>创建&编辑邮件模板</h3></el-divider> <el-form label-position="top"> <el-form-item label="邮件名称" prop="name" style="width: 200px"> <el-input v-model="modeData.name"></el-input> </el-form-item> <el-form-item label="模板名称" prop="subject" style="width: 200px"> <el-input v-model="modeData.subject"></el-input> </el-form-item> <el-form-item label="语言" prop="language"> <el-select v-model="modeData.language" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-form-item> <el-form-item label="启动/禁用" prop="enable"> <el-switch v-model="modeData.enable" active-text="禁用" inactive-text="启动"> </el-switch> </el-form-item> <el-form-item label="模板配置" prop="value"> <PiEditor v-model="modeData.value" placeholder="请输入" :height="400" /> </el-form-item> <el-button @click="onSubmit">保存</el-button> </el-form> </el-card>请为这段代码布局
可以使用以下代码布局:
```
<template>
<el-card shadow="never">
<el-divider content-position="left">
<h3>创建&编辑邮件模板</h3>
</el-divider>
<el-form label-position="top">
<el-form-item label="邮件名称" prop="name">
<el-input v-model="modeData.name" style="width: 200px" />
</el-form-item>
<el-form-item label="模板名称" prop="subject">
<el-input v-model="modeData.subject" style="width: 200px" />
</el-form-item>
<el-form-item label="语言" prop="language">
<el-select v-model="modeData.language" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="启动/禁用" prop="enable">
<el-switch v-model="modeData.enable" active-text="禁用" inactive-text="启动" />
</el-form-item>
<el-form-item label="模板配置" prop="value">
<PiEditor v-model="modeData.value" placeholder="请输入" :height="400" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">保存</el-button>
</el-form-item>
</el-form>
</el-card>
</template>
```
这样可以使表单更加美观,且易于使用。
如何让<el-form-item label="所属货架:"> <el-select v-model="query.shelfId" size="small" clearable placeholder="选择货架编号" style="width:70%"> <el-option v-for="item in shelfList" :key="item.id" :label="item.name" :value="item.id" /> </el-select> </el-form-item> <el-form-item label="编码规则:"> <el-select v-model="query.shelfId" size="small" clearable placeholder="选择编码规则" style="width:70%"> <el-option v-for="item in shelfList" :key="item.id" :label="item.name" :value="item.id" />这两个选择框靠在一起
你可以将这两个 el-form-item 包裹在一个 div 容器中,并设置该容器的样式为 display: flex; 和 flex-wrap: wrap;,从而实现两个选择框并排显示,如下所示:
```
<div style="display: flex; flex-wrap: wrap;">
<el-form-item label="所属货架:">
<el-select v-model="query.shelfId" size="small" clearable placeholder="选择货架编号" style="width:70%">
<el-option v-for="item in shelfList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
<el-form-item label="编码规则:">
<el-select v-model="query.shelfId" size="small" clearable placeholder="选择编码规则" style="width:70%">
<el-option v-for="item in shelfList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</div>
```
设置容器的样式为 display: flex; 可以将容器内的元素变成弹性盒子,从而实现并排显示,设置 flex-wrap: wrap; 可以在容器宽度不足时,自动换行显示。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)