feat: add responsive support for slots of StandardTable.vue; 🌟

新增:StandardTable.vue 组件的插槽增加响应式支持;
master
iczer 5 years ago
parent b2317e3209
commit 5b5a5ea3ef
  1. 29
      src/components/table/StandardTable.vue

@ -20,15 +20,20 @@
:dataSource="dataSource" :dataSource="dataSource"
:rowKey="rowKey" :rowKey="rowKey"
:pagination="pagination" :pagination="pagination"
:expandedRowKeys="expandedRowKeys"
:expandedRowRender="expandedRowRender"
@change="onChange" @change="onChange"
:rowSelection="selectedRows ? {selectedRowKeys: selectedRowKeys, onChange: updateSelect} : undefined" :rowSelection="selectedRows ? {selectedRowKeys: selectedRowKeys, onChange: updateSelect} : undefined"
> >
<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 Object.keys($scopedSlots).filter(key => key !== 'expandedRowRender') ">
<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"> <template :slot="slot" v-for="slot in Object.keys($slots)">
<slot :name="slot"></slot> <slot :name="slot"></slot>
</template> </template>
<template slot-scope="record, index, indent, expanded" slot="expandedRowRender" v-if="$scopedSlots.expandedRowRender">
<slot v-bind="{record, index, indent, expanded}" name="expandedRowRender"></slot>
</template>
</a-table> </a-table>
</div> </div>
</template> </template>
@ -49,13 +54,13 @@ export default {
type: [Object, Boolean], type: [Object, Boolean],
default: true default: true
}, },
selectedRows: Array selectedRows: Array,
expandedRowKeys: Array,
expandedRowRender: Function
}, },
data () { data () {
return { return {
needTotalList: [], needTotalList: []
scopedSlots: [],
slots: []
} }
}, },
methods: { methods: {
@ -73,16 +78,6 @@ export default {
}) })
return totalList return totalList
}, },
getScopedSlots(columns) {
let scopedSlots = columns.filter(item => item.scopedSlots).map(item => item.scopedSlots)
scopedSlots = scopedSlots.flatMap(item => Object.values(item))
return scopedSlots
},
getSlots(columns) {
let slots = columns.filter(item => item.slots).map(item => item.slots)
slots = slots.flatMap(item => Object.values(item))
return slots
},
onClear() { onClear() {
this.updateSelect([], []) this.updateSelect([], [])
this.$emit('clear') this.$emit('clear')
@ -92,8 +87,6 @@ export default {
} }
}, },
created () { created () {
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: {

Loading…
Cancel
Save