elementUI 的 input无法输入bug解决

猿柒

15天前发布

1、出现bug的原因
是因为数据层虽然改变了，但是并没有引起视图层的变化

2、解决方案

@input=”forceUpdate($event)” //在input框上加输入事件

forceUpdate(e) {
this.$forceUpdate() 强制刷新
}

jeecg-boot框架前端写了个筛选组件：SearchBox.vue，测试人员发现输入框无法输入数据，经查是这个问题。

<template> <div> <el-form :inline=”true” ref=”searchForm” :model=”formData” :label-width=”labelWidth”> <el-row style=”display: flex;flex-wrap: wrap;”> <template v-for=”(item, index) in searchOptions”> <el-col :xs=”12″ :sm=”8″ :md=”8″ :lg=”6″ :xl=”4″> <el-form-item :label=”item.label” :prop=”item.prop”> <!– 输入框 –> <template v-if=”item.isInput && item.isInput == 1″> <el-input style=”width:100%;” :allowClear=”true” placeholder=”请输入”
@input=”forceUpdate($event)” v-model=”formData[item.prop]” /> </template> <!– 选择框 –> <template v-if=”item.isSelect && item.isSelect == 1″> <el-select style=”width:100%;” :disabled=”item.disabled” filterable :clearable=”item.isClearable != ‘0’ ” v-model=”formData[item.prop]” placeholder=”请选择” @change=”val => { handleChange(val, item) }”> <el-option v-for=”(el, i) in item.options” :key=”i” :value=”el.value” :label=”el.name” /> </el-select> </template> <!– 树选择框 –> <template v-if=”item.isTreeSelect && item.isTreeSelect == 1″> <a-tree-select :allowClear=”true” style=”width:100%;” :replaceFields=”item.replaceFields” :disabled=”item.disabled” v-model=”formData[item.prop]” placeholder=”请选择” :dropdown-style=”{ maxHeight: ‘400px’, overflow: ‘auto’ }” :tree-data=”item.options” @change=”val => { handleChange(val, item) }” /> </template> <!– 时间选择 –> <template v-if=”item.isDate && item.isDate == 1″> <el-date-picker style=”width:100%;” v-model=”formData[item.prop]” :format=”item.format” :value-format=”item.valueFormat” :type=”item.type” placeholder=”请选择” /> </template> </el-form-item> </el-col> </template> <!– 查询重置按钮 –> <el-col :xs=”12″ :sm=”8″ :md=”8″ :lg=”6″ :xl=”4″ style=”margin-left: auto;”> <el-form-item label=”” prop=”” style=”display: flex;justify-content: flex-end;”> <div class=”btn-group-s”> <el-button type=”primary” icon=”el-icon-search” @click=”onSearch(true)”>查询</el-button> <el-button style=”margin-left: 8px” @click=”onSearch(false)”>重置</el-button> <el-button v-for=”(btn, idx) in extendBtn” :key=”idx” :type=”btn.type || ‘primary'” style=”margin-left: 8px” @click=”btnClick(btn)”>{{ btn.label }}</el-button> </div> </el-form-item> </el-col> </el-row> </el-form> </div> </template> <script> export default { props: { searchOptions: { type: Array, default: () => [] }, extendBtn: { type: Array, default: () => [] }, labelWidth: { type: String, default: ‘160px’ }, }, components: {}, data() { return { formData: {}, } }, mounted() {}, computed: {}, methods: { init() { this.searchOptions.map((i) => { if (i.defaultVal) { this.formData[i.prop] = i.defaultVal } else { this.formData[i.prop] = undefined } }) this.$emit(‘onSearch’, this.formData) }, btnClick(btn) { this.$emit(btn.clickFn) }, forceUpdate(e) { this.$forceUpdate() //强制刷新 }, // 查询or重置 onSearch(flag) { if (!flag) { this.formData = {} this.$refs.searchForm.resetFields() this.searchOptions.map((i) => { if (i.defaultVal) { this.formData[i.prop] = i.defaultVal } else { this.formData[i.prop] = undefined } }) this.$forceUpdate() } this.$emit(‘onSearch’, this.formData) }, handleChange(value, obj) { this.formData = { …this.formData, [obj.prop]: value } this.$emit(‘handleChange’, value, obj) }, }, } </script> <style lang=”less” scoped> @import ‘~@assets/less/normal.less’;

/deep/.el-form-item { margin-bottom: 5px; width: 100%; } /deep/.el-form-item–mini .el-form-item__content { width: calc(100% – 140px); }

.btn-group-s { height: 28px; display: flex; align-items: center; display: flex; justify-content: flex-end; } /deep/.ant-select-selection__rendered { line-height: 28px; } /deep/.ant-select-selection–single { height: 28px; } /deep/.ant-select { font-size: 12px; } </style>

评分

欢迎为Ta评分