修复:AdvanceTable 组件异步获取列配置不生效的问题;🐛 #159 #160 #161

fix: the async configuration of columns not to take effect in AdvanceTable.vue;
This commit is contained in:
chenghongxing 2020-11-29 11:56:52 +08:00
parent 6451795046
commit 125879b02c
3 changed files with 33 additions and 15 deletions

View File

@ -49,18 +49,16 @@
checkedCounts(val) { checkedCounts(val) {
this.checkAll = val === this.columns.length this.checkAll = val === this.columns.length
this.indeterminate = val > 0 && val < this.columns.length this.indeterminate = val > 0 && val < this.columns.length
},
columns(newVal, oldVal) {
if (newVal != oldVal) {
this.checkedCounts = newVal.length
this.formatColumns(newVal)
}
} }
}, },
created() { created() {
this.$emit('update:visibleColumns', [...this.columns]) this.formatColumns(this.columns)
for (let col of this.columns) {
if (col.visible === undefined) {
this.$set(col, 'visible', true)
}
if (!col.visible) {
this.checkedCounts -= 1
}
}
}, },
methods: { methods: {
onCheckChange(e, col) { onCheckChange(e, col) {
@ -126,6 +124,16 @@
conditions[col.dataIndex] = col.search.value conditions[col.dataIndex] = col.search.value
}) })
return conditions return conditions
},
formatColumns(columns) {
for (let col of columns) {
if (col.visible === undefined) {
this.$set(col, 'visible', true)
}
if (!col.visible) {
this.checkedCounts -= 1
}
}
} }
} }
} }

View File

@ -32,7 +32,7 @@
</div> </div>
</div> </div>
<a-table <a-table
v-bind="{...$options.propsData, columns: visibleColumns, title: undefined, loading: false}" v-bind="{...this.$props, columns: visibleColumns, title: undefined, loading: false}"
:size="sSize" :size="sSize"
@expandedRowsChange="onExpandedRowsChange" @expandedRowsChange="onExpandedRowsChange"
@change="onChange" @change="onChange"

View File

@ -7,7 +7,10 @@
{{col.title}}: {{col.title}}:
</template> </template>
<slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot> <slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
<a-switch @change="onSwitchChange(col)" class="switch" v-model="col.search.value" size="small" checked-children="是" un-checked-children="否" /> <a-switch @change="onSwitchChange(col)" class="switch" v-model="col.search.value" size="small"
:checked-children="(col.search.switchOptions && col.search.switchOptions.checkedText) || '是'"
:un-checked-children="(col.search.switchOptions && col.search.switchOptions.uncheckedText) || '否'"
/>
<a-icon v-if="col.search.value !== undefined" class="close" @click="e => onCloseClick(e, col)" type="close-circle" theme="filled" /> <a-icon v-if="col.search.value !== undefined" class="close" @click="e => onCloseClick(e, col)" type="close-circle" theme="filled" />
</div> </div>
<div v-else-if="col.dataType === 'time'" :class="['title', {active: col.search.value}]"> <div v-else-if="col.dataType === 'time'" :class="['title', {active: col.search.value}]">
@ -70,12 +73,14 @@
props: ['columns', 'formatConditions'], props: ['columns', 'formatConditions'],
inject: ['table'], inject: ['table'],
created() { created() {
this.columns.forEach(item => { this.formatColumns(this.columns)
this.$set(item, 'search', {...item.search, visible: false, value: undefined, format: this.getFormat(item)})
})
console.log(this.columns)
}, },
watch: { watch: {
columns(newVal, oldVal) {
if (newVal != oldVal) {
this.formatColumns(newVal)
}
},
searchCols(newVal, oldVal) { searchCols(newVal, oldVal) {
if (newVal.length != oldVal.length) { if (newVal.length != oldVal.length) {
const newConditions = this.getConditions(newVal) const newConditions = this.getConditions(newVal)
@ -218,6 +223,11 @@
return true return true
} }
return false return false
},
formatColumns(columns) {
columns.forEach(item => {
this.$set(item, 'search', {...item.search, visible: false, value: undefined, format: this.getFormat(item)})
})
} }
} }
} }