注意一点是,el-form-item里的 :prop="scope.$index + '.name'"需要对应el-input的 v-model="studentData[scope.$index].name",两者都是同一个字段值。 <template><div><div><div><el-button size="small"@click="addRow">新增</el-button></div><!--设置的表单--><el-form:model="studentData"...
</el-form-item> <el-form-item label="密码"> <el-input type="password" v-model="form.pwd"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">登录</el-button> <el-button>取消</el-button> </el-form-item> </el-form> </template> <scrip...
<el-input v-model="ruleForm.reason" placeholder="请输入离职原因"></el-input> </el-form-item> </el-col> <el-col :span="10" :offset="2" > <el-form-item label="证明人 " prop="witness"> <el-input v-model="ruleForm.witness" placeholder="请输入证明人姓名"></el-input> </el-...
所以得出结论,因为在我们自定义的组件内部没有触发el.form.blur和el.form.change这两个事件,所以想要使用el-form, el-form-item组件的表单校验功能,组件内部必须要用包裹它的el-form-item组件$emitel.form.blur和el.form.change。代码这么写: // 结论栗子.vue<template><el-form:model="formData":rule="rules...
下面是一个简单的el-form示例: <template> <el-form :model="form" :rules="rules" ref="form" label-width="100px"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> ...
el-form <template><formclass="xc-form"ref="xc-form"><slot></slot></form></template><script>import { judgeParam } from './utils' import { deepClone } from '@/utils' export default { inheritAttrs: false, name: 'xc-form',
二次封装el-form,理由无非就是多个地方用同一个表单,懒得重复写校验。 表单组件 <template><el-formref="FormRef":model="formData":rules="rules"><el-form-itemlabel="名称"prop="name"><el-inputv-model.trim="formData.name"/></el-form-item><el-form-itemlabel="地址"prop="address"><el-input...
</template> </el-form-item> 2.data表单数据 resourceForm:{ criteriaList:[] }, 3.添加或删除操作 //添加过滤设定 addGuolv(){ varjsn={criColumn:'',criComparType:'',criComparValue:'',criRelation:'and'}; this.resourceForm.criteriaList.push(jsn) ...
<el-table-column label="物品名称" prop="stuffName" width="150"> <template slot-scope="scope"> <el-form-item :prop="`stuffName${scope.$index}`" :rules="{ required: true, message: '请选择一个物品名称', trigger: 'change' }"> <el-select v-model="scope.row.stuffName" filterable ...
首先是el-form-item的类型: tag类型显示 input输入 select选择 按钮或者图片的显示或者绑定操作 textarea输入 然后再分析每个节点: label宽度 是否需要验证 placeholder显示 验证规则 绑定的相关事件 是否可为readonly/disabled 节点的class/样式 (一行显示一个或者多个) ...