elementUI 的 input无法输入bug解决
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>
