feat: add slots support for StandardTable.vue; 🌟

新增:StandardTable.vue 组件增加 slots 支持;
master
chenghongxing 5 years ago
parent 272f740597
commit 6c33fb0072
  1. 27
      src/components/table/StandardTable.vue
  2. 18
      src/pages/list/QueryList.vue

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

@ -97,6 +97,8 @@
:dataSource="dataSource"
:selectedRows.sync="selectedRows"
@clear="onClear"
@change="onChange"
@selectedRowChange="onSelectChange"
>
<div slot="description" slot-scope="{text}">
{{text}}
@ -104,6 +106,9 @@
<div slot="action" slot-scope="{text, record, index}">
<a-icon type="edit" />{{index}}
</div>
<template slot="statusTitle">
<a-icon @click.native="onStatusTitleClick" type="info-circle" />
</template>
</standard-table>
</div>
</a-card>
@ -129,9 +134,9 @@ const columns = [
customRender: (text) => text + ' 次'
},
{
title: '状态',
dataIndex: 'status',
needTotal: true
needTotal: true,
slots: {title: 'statusTitle'}
},
{
title: '更新时间',
@ -179,6 +184,15 @@ export default {
onClear() {
this.$message.info('您清空了勾选的所有行')
},
onStatusTitleClick() {
this.$message.info('你点击了状态栏表头')
},
onChange() {
this.$message.info('表格状态改变了')
},
onSelectChange() {
this.$message.info('选中行改变了')
},
addNew () {
this.dataSource.unshift({
key: this.dataSource.length,

Loading…
Cancel
Save