目标解决VUe数组刷新前台不渲染方式:
方式1:
使用如下的方式,调用全局的set方法,使其vue相应;
this.$set(this.conditionFieldList[index],"source","none")
方式2:
给定table增加 :key="conditionsKey" 属性;每次调用方法时,使用 conditionsKey++ 强制渲染。
例如: 如下 conditionsKey 使用
<a-table
bordered
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
:columns="conditionColumns"
:dataSource="conditionFieldList"
:pagination="false"
:key="conditionsKey"
:loading="dataLoading"
>
.......
export default {
name: 'ConditionList',
props: {
conditionFieldList: Array,
selectTables:Array,
dbSource: String,
dbSourceType: String
},
data() {
return {
conditionColumns,
operaTypeList,
sourceList,
dataLoading: false,
fieldNameOptions:[],
asocciationFieldNameOptions:[],
selectedRowKeys: [],
conditionsKey: 0,
fieldValue: [],
fieldTypes: []
}
},
.......
methods: {
handleAdd() {
let arr = this.conditionFieldList
arr.push({source:'asocciate',operaType:'='})
this.$emit('update:conditionFieldList', arr)
},
handleDel() {
let arr = this.conditionFieldList
arr = arr.filter((item, index) => this.selectedRowKeys.indexOf(index) === -1)
this.selectedRowKeys = []
this.$emit('update:conditionFieldList', arr)
this.conditionsKey ++;
},