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>