feat: add slots support for StandardTable.vue; 🌟

This commit is contained in:
chenghongxing 2020-07-23 12:52:20 +08:00
parent d279d2f976
commit de9af0c238
4 changed files with 26 additions and 7 deletions

View File

@ -20,11 +20,15 @@
:dataSource="dataSource" :dataSource="dataSource"
:rowKey="rowKey" :rowKey="rowKey"
:pagination="pagination" :pagination="pagination"
@change="onChange"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: updateSelect}" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: updateSelect}"
> >
<template slot-scope="text, record, index" :slot="slot" v-for="slot in scopedSlots"> <template slot-scope="text, record, index" :slot="slot" v-for="slot in scopedSlots">
<slot :name="slot" v-bind="{text, record, index}"></slot> <slot :name="slot" v-bind="{text, record, index}"></slot>
</template> </template>
<template :slot="slot" v-for="slot in slots">
<slot :name="slot"></slot>
</template>
</a-table> </a-table>
</div> </div>
</template> </template>
@ -36,13 +40,14 @@ export default {
data () { data () {
return { return {
needTotalList: [], needTotalList: [],
scopedSlots: [] scopedSlots: [],
slots: []
} }
}, },
methods: { methods: {
updateSelect (selectedRowKeys, selectedRows) { updateSelect (selectedRowKeys, selectedRows) {
this.$emit('update:selectedRows', selectedRows) this.$emit('update:selectedRows', selectedRows)
this.$emit('change', selectedRowKeys, selectedRows) this.$emit('selectedRowChange', selectedRowKeys, selectedRows)
}, },
initTotalList (columns) { initTotalList (columns) {
const totalList = [] const totalList = []
@ -54,16 +59,30 @@ export default {
return totalList return totalList
}, },
getScopedSlots(columns) { getScopedSlots(columns) {
return columns.filter(item => item.scopedSlots && item.scopedSlots.customRender) let scopedSlots = columns.filter(item => item.scopedSlots).map(item => item.scopedSlots)
.map(item => item.scopedSlots.customRender) scopedSlots = scopedSlots.flatMap(item => {
return Object.keys(item).map(key => item[key])
})
return scopedSlots
},
getSlots(columns) {
let slots = columns.filter(item => item.slots).map(item => item.slots)
slots = slots.flatMap(item => {
return Object.keys(item).map(key => item[key])
})
return slots
}, },
onClear() { onClear() {
this.updateSelect([], []) this.updateSelect([], [])
this.$emit('clear') this.$emit('clear')
},
onChange(pagination, filters, sorter, {currentDataSource}) {
this.$emit('change', pagination, filters, sorter, {currentDataSource})
} }
}, },
created () { created () {
this.scopedSlots = this.getScopedSlots(this.columns) this.scopedSlots = this.getScopedSlots(this.columns)
this.slots = this.getSlots(this.columns)
this.needTotalList = this.initTotalList(this.columns) this.needTotalList = this.initTotalList(this.columns)
}, },
watch: { watch: {

View File

@ -12,7 +12,7 @@ export default {
computed: { computed: {
...mapState('setting', ['multiPage']), ...mapState('setting', ['multiPage']),
minHeight() { minHeight() {
return this.multiPage ? this.layoutMinHeight : this.layoutMinHeight return this.multiPage ? this.layoutMinHeight - 32 : this.layoutMinHeight
} }
} }
} }

View File

@ -13,7 +13,7 @@ export default {
...mapState('setting', ['multiPage']), ...mapState('setting', ['multiPage']),
minHeight() { minHeight() {
let layoutMinHeight = this.layoutMinHeight || window.innerHeight let layoutMinHeight = this.layoutMinHeight || window.innerHeight
return this.multiPage ? layoutMinHeight: layoutMinHeight return this.multiPage ? layoutMinHeight - 32 : layoutMinHeight
} }
} }
} }

View File

@ -12,7 +12,7 @@ export default {
computed: { computed: {
...mapState('setting', ['multiPage']), ...mapState('setting', ['multiPage']),
minHeight() { minHeight() {
return this.multiPage ? this.layoutMinHeight : this.layoutMinHeight return this.multiPage ? this.layoutMinHeight - 24 : this.layoutMinHeight
} }
} }
} }