el-input输入框的空格问题
技术栈:vue + elementui需求:在表单中,输入的内容要去除两端空格1.允许输入空格2.输入空格后表单非空验证不通过解决方式1:使用v-model的指令修饰符.trim(缺点:不能输入空格,不满足需求)解决方法2:使用blur方法在失去焦点时进行trim()<el-formref="form":model="formData":rules="formRules"style="wid
·
技术栈:vue + elementui
需求:在表单中,输入的内容要去除两端空格
1.允许输入空格
2.输入空格后表单非空验证不通过
- 解决方式1:使用v-model的指令修饰符.trim(缺点:不能输入空格,不满足需求)
- 解决方法2:使用blur方法在失去焦点时进行trim()
<el-form
ref="form"
:model="formData"
:rules="formRules"
style="width:80%;margin-top:20px;"
size="small"
label-width="100px"
>
<el-form-item label="当前节点" prop="moduleId">
<el-input
readonly
v-model="formData.moduleId"
@blur="formData.moduleId=$event.target.value.trim()"
></el-input>
</el-form-item>
<el-form-item label="父节点" prop="parentId">
<el-input
readonly
v-model="formData.parentId"
@blur="formData.parentId=$event.target.value.trim()"
></el-input>
</el-form-item>
<el-form-item label="名称" prop="moduleName">
<el-input
placeholder="模块名称"
@blur="formData.moduleName=$event.target.value.trim()"
v-model="formData.moduleName"></el-input>
</el-form-item>
<el-form-item label="编码" prop="moduleCode">
<el-input
placeholder="模块编码"
@blur="formData.moduleCode=$event.target.value.trim()"
v-model="formData.moduleCode"></el-input>
</el-form-item>
<el-form-item label="图标">
<el-input
placeholder="图标样式class"
@blur="formData.moduleIcon=$event.target.value.trim()"
v-model="formData.moduleIcon"></el-input>
</el-form-item>
<el-form-item label="模块类型" prop="moduleType">
<el-select style="width:100%;" v-model="formData.moduleType">
<el-option value="3" label="菜单目录"></el-option>
<el-option value="4" label="页面按钮"></el-option>
</el-select>
</el-form-item>
<el-form-item label="系统编码">
<el-input
placeholder="系统编码"
@blur="formData.sysCode=$event.target.value.trim()"
v-model="formData.sysCode"></el-input>
</el-form-item>
<el-form-item label="功能类型">
<el-radio-group v-model="formData.appType">
<el-radio label="1">PC端</el-radio>
<el-radio label="2">移动端</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="顺序号" prop="sort">
<el-input
placeholder="顺序号"
@blur="formData.sort=$event.target.value.trim()"
v-model="formData.sort"></el-input>
</el-form-item>
<el-form-item label="功能URL" prop="actionUrl">
<el-input
placeholder="功能URL"
@blur="formData.actionUrl=$event.target.value.trim()"
v-model="formData.actionUrl"></el-input>
</el-form-item>
<el-form-item label="帮助URL">
<el-input
placeholder="帮助URL"
@blur="formData.helpUrl=$event.target.value.trim()"
v-model="formData.helpUrl"></el-input>
</el-form-item>
<el-form-item label="模块描述">
<el-input
type="textarea"
placeholder="编辑模块描述..."
@blur="formData.moduleDesc=$event.target.value.trim()"
v-model="formData.moduleDesc"></el-input>
</el-form-item>
<el-form-item v-if="control.save">
<el-button type="primary" @click="save">保存</el-button>
</el-form-item>
</el-form>
更多推荐
已为社区贡献1条内容
所有评论(0)