We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
1.0.0
macOS/Chrome 53
2.0.0
具体见: http://codepen.io/cycold/pen/woGGgr
<!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui@1.0.0/lib/theme-default/index.css"> <div id="app"> <el-form :model="model" :rules="rules" ref="form" style="width: 500px;"> <el-form-item label="公司名称" label-width="90px" prop="companyName"> <el-input :maxlength="11" placeholder="请输入公司名(不能输入)" v-model="model.companyName"></el-input> <!-- 此处不能进行输入 但是只要将type改成 textarea 又可以输入了 --> </el-form-item> <el-form-item label="公司名称" label-width="90px" prop="companyName2"> <el-row type="flex"> <el-col :span="24"> <el-input placeholder="请输入公司名" v-model="model.companyName2"></el-input> <!-- 当不是直接子组件时,正常的 --> </el-col> <el-col :span="0" style="width: 150px; margin-left: 10px;"><el-button>选择已有公司</el-button></el-col> </el-row> </el-form-item> <el-form-item label="公司名称" label-width="90px" prop="companyName3"> <el-input :maxlength="11" placeholder="请输入公司名" v-model="model.companyName3"type="textarea"></el-input> </el-form-item> </el-form> </div> <script src="https://unpkg.com/vue@2.0.5/dist/vue.min.js"></script> <script src="https://unpkg.com/element-ui@1.0.0/lib/index.js"></script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!', model: {}, rules: { companyName: [{ type: 'string', required: true, message: '请输入公司名称' }], companyName2: [{ type: 'string', required: true, message: '请输入公司名称' }], companyName3: [{ type: 'string', required: true, message: '请输入公司名称' }], } } })
The text was updated successfully, but these errors were encountered:
用法有点问题,目前版本的 model 不能赋值一个空对象,否则 vue 没办法对这个属性进行 hook。我改了一下,目前可以了:http://codepen.io/anon/pen/xRVqrJ
Sorry, something went wrong.
是这样的, 有时一个组件会接受一个model对象引用类型属性, 目的就是在这个组件里面修改其属性;
可能就是几个组件共用一个mode表单对象的不同字段(这个对象字段比较多,分成几个组件进行修改,然后提交), 虽然可以在每一个组件里面预定义好字段, 然后再extend/assign进去(传进来属性不能修改,这里只能遍历逐个修改)(或者使用事件emit出去). 但是总觉得直接使用传进来的对象最简单直接了
但是我发现上面也是可以使用空对象的. 只要在el-input外部在包一个组件即可了.
<el-form-item label="公司电话" label-width="90px" prop="contact"> <el-col :span="24"><el-input :maxlength="11" placeholder="请输入公司电话" v-model="model.contact" :disabled="comEditFlag"></el-input></el-col> </el-form-item>
源码显示: 每一个 el-form-item 组件会new 一个AsyncValidator实例的 同时也会创建一个内部验证的 model对象, 将其el-form-item上的prop属性设置到model对象上去的. this.fieldValue可能读取的就是undefined当验证对象为空时
this.fieldValue
undefined
var validator = new AsyncValidator(descriptor); var model = {}; model[this.prop] = this.fieldValue;
问题是,为什么type=textarea和外部包一层组件就可以正常验证呢?
No branches or pull requests
ElementUI version
1.0.0
OS/Browers version
macOS/Chrome 53
Vue version
2.0.0
Reproduction Link
具体见:
http://codepen.io/cycold/pen/woGGgr
The text was updated successfully, but these errors were encountered: