el-form-item label="家属" :label-width="formLabelWidth" prop="family"> <el-input v-model="addForm.family" autocomplete="off" style="width:230px" >1234</el-input> </el-form-item>为什么不能把123赋值给input
时间: 2023-07-06 19:22:52 浏览: 141
这是因为 `<el-input>` 标签中的内容会被覆盖,即使你在 `<el-input>` 标签中写入了 123,也会被 `<el-input>` 标签中的 `v-model` 所绑定的值覆盖掉。如果你想要给 `<el-input>` 标签设置默认值,应该将默认值赋给 `addForm.family` 这个变量,即在 Vue 组件的 `data` 中添加以下代码:
```javascript
data() {
return {
addForm: {
family: '123' // 在这里给 addForm.family 赋值
}
}
}
```
这样当页面加载的时候,`<el-input>` 标签中就会显示默认值 `123`。
相关问题
<el-form-item label="成立时间:" prop="establishmentDate"> <el-date-picker>不想有时间
`<el-form-item label="成立时间:" prop="establishmentDate">` 这段HTML代码是一个Element UI表单组件,用于创建一个输入框标签,其属性包括"label"(显示的文本标签,这里是"成立时间:")和"prop"(关联到数据模型的属性名,这里是"establishmentDate")。内部的`<el-date-picker>`表示这是一个日期选择器,用户可以点击选择日期。
如果你只想让用户选择日期而无需指定时间部分,可以在`<el-date-picker>`上添加一个属性 `type="date"` 或者直接设置 `picker-options` 对象,只启用日期选择:
```html
<el-form-item label="成立时间:" prop="establishmentDate">
<el-date-picker type="date" placeholder="请选择日期"></el-date-picker>
</el-form-item>
```
或者
```html
<el-form-item label="成立时间:" prop="establishmentDate">
<el-date-picker picker-options="{showTime: false}" placeholder="请选择日期"></el-date-picker>
</el-form-item>
```
在这两个例子中,`showTime: false` 都会隐藏默认的时间选择选项。
<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>
```
这样可以使表单更加美观,且易于使用。
阅读全文