element-ui >>>　　　Invalid handler for event "input": got undefined

• 发布人: sanye
• 时间: 2021-11-20
• 分类: Vue

<!--more--> ``` <div class="zysoft-table-select"> <el-form ref="tableForm" model={ this.formModel } inline={ this.inline } label-position={this.labelPosition} disabled={ this.isDisabled } class="zysoft-form-serch" label-width={ this.labelWidth} size="mini"> <el-row gutter={20}> { this.generateCode() } <el-col xs={12} sm={3} md={4} lg={{span: '4-8'}} xl={{span: '4-8'}}> <el-button type="primary" size="mini" >查询</el-button> <el-button type="success" size="mini">重置</el-button> </el-col> </el-row> </el-form> </div> ``` 增加mode后 ``` [Vue warn]: Invalid handler for event "input": got undefined ``` 临时解决 : 可以在 el-form上加 on-input={()=>{}} 解决 让他的input有事件就不会报错了 终极解决方案 传参方式需要{...props:{}} ``` render(h){ return( <div class="zysoft-table-select-meet-frame"> <el-form ref="tableForm" class="zysoft-form-serch" {...{props: { model: this.formModel,////vue jsx element 表单校验的model不可以直接写 以这种方式解决 inline: this.inline, labelPosition:this.labelPosition, disabled: this.isDisabled, labelWidth: this.labelWidth, size: this.size } } } > <el-row gutter={20}> { this.generateCode() } { this.$slots.select } </el-row> </el-form> </div> ) } ``` 参考地址： https://github.com/ElemeFE/element/issues/20286

标签: this, 事件, props, code, rate, 传参, render

本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。