<template>
|
<div>
|
<div class="systemTable">
|
<!-- :rowSelection="rowSelection"-->
|
<a-table
|
:loading="loading"
|
:dataSource="dataSource"
|
@change="handleTableChange"
|
:columns="columns"
|
:pagination="paginationProps"> //分页属性
|
<!--
|
<slot name="columns"></slot>
|
-->
|
</a-table>
|
</div>
|
</div>
|
</template>
|
|
<style lang="less">
|
.systemTable {
|
:global {
|
.ant-table-pagination {
|
margin-top: 24px;
|
}
|
}
|
|
.tableAlert {
|
margin-bottom: 16px;
|
}
|
}
|
</style>
|
|
<script lang="tsx">
|
import {
|
Component,
|
Prop,
|
Vue,
|
Emit,
|
Watch
|
} from 'vue-property-decorator';
|
import * as _ from 'lodash';
|
|
@Component({})
|
export default class SystemTable extends Vue {
|
|
// private needTotalList: any[] = [];
|
|
private selectedRowKeys: any[] = [];
|
|
// get rowSelection() {
|
// return {
|
// selectedRowKeys: this.selectedRowKeys,
|
// onChange: this.handleRowSelectChange,
|
// getCheckboxProps: (record: any) => ({
|
// props: {
|
// disabled: record.disabled,
|
// },
|
// }),
|
// };
|
// }
|
|
@Prop({
|
type: Boolean,
|
default: false,
|
})
|
private loading!: boolean;
|
|
// @Prop({
|
// type: Object,
|
// default: () => {},
|
// })
|
// private pagination!: any;
|
|
@Prop({
|
type:Object,
|
default:()=>{
|
}
|
})
|
private paginationProps!:any;
|
|
@Prop({
|
type: Array,
|
default: () => [],
|
})
|
private columns!: any[];
|
|
|
@Prop({
|
type: Array,
|
default: () => [],
|
})
|
private dataSource!: any[];
|
|
@Prop({
|
type: Array,
|
default: () => [],
|
})
|
private selectedRows!: any[];
|
|
@Prop({
|
type: Number,
|
default: false,
|
})
|
private total!: number;
|
|
// get pagination(): any {
|
// return {
|
// total: this.total ? this.total : 0,
|
// pageSize: 5,//每页中显示10条数据
|
// showSizeChanger: true,
|
// pageSizeOptions: null,//每页中显示的数据
|
// showTotal: (total:number) => `共有 ${this.total} 条数据`, //分页中显示总的数据
|
// };
|
// }
|
|
|
private handleTableChange(pagination: any, filters: any, sorter: any): void {
|
this.pageSend(pagination.current)
|
this.onTableChange(pagination, filters, sorter);
|
}
|
|
private handleRowSelectChange(selectedRowKeys: any, selectedRows: any): void {
|
this.selectedRowKeys = selectedRowKeys;
|
|
// this.needTotalList = this.needTotalList.map((item: any) => ({
|
// ...item,
|
// total: _.sumBy(selectedRows, item.dataIndex),
|
// }));
|
this.onSelectChange(selectedRowKeys, selectedRows);
|
|
}
|
|
private mounted() {
|
// this.needTotalList = this.initTotalList(this.columns);
|
}
|
// private initTotalList(columns: any[]) {
|
// const totalList: any[] = [];
|
// columns.forEach((column: any) => {
|
// if (column.needTotal) {
|
// totalList.push({ ...column,
|
// total: 0,
|
// });
|
// }
|
// });
|
// return totalList;
|
// }
|
@Emit('cPage')
|
private pageSend(page: number) {
|
return page;
|
}
|
@Emit('selectChange')
|
private onSelectChange(selectedRowKeys: any, selectedRows: any) {
|
|
}
|
|
@Emit('tableChange')
|
private onTableChange(pagination: any, filters: any, sorter: any) {
|
}
|
|
}
|
</script>
|
|
