<template>
|
<div>
|
<!-- <div class="standardTable">
|
<a-table
|
:loading="loading"
|
:dataSource="dataSource"
|
|
@change="handleTableChange"
|
:columns="columns"
|
:pagination="paginationProps"
|
></a-table>
|
</div> -->
|
<div class="standardTable">
|
<a-table
|
:loading="loading"
|
:dataSource="dataSource"
|
@change="handleTableChange"
|
:columns="columns"
|
:pagination="paginationProps"
|
></a-table>
|
</div>
|
</div>
|
</template>
|
|
<style lang="less">
|
.standardTable {
|
:global {
|
.ant-table-pagination {
|
margin-top: 24px;
|
}
|
}
|
|
.tableAlert {
|
margin-bottom: 16px;
|
}
|
}
|
</style>
|
|
<script lang="tsx">
|
import {
|
Component,
|
Prop,
|
Vue,
|
Emit,
|
|
} from 'vue-property-decorator';
|
import * as _ from 'lodash';
|
import axios from "axios";
|
@Component({})
|
export default class StandardTable extends Vue {
|
|
private needTotalList: any[] = [];
|
|
private selectedRowKeys: any[] = [];
|
|
private total:any=null;
|
|
|
|
@Prop({
|
type: Boolean,
|
default: false,
|
})
|
private loading!: boolean;
|
|
|
|
@Prop({
|
type: Array,
|
default: () => [],
|
})
|
private columns!: any[];
|
|
@Prop({
|
type: Array,
|
default: () => [],
|
})
|
private dataSource!: any[];
|
|
@Prop({
|
type: Array,
|
default: () => [],
|
})
|
private selectedRows!: any[];
|
|
@Prop({
|
type:Object,
|
default:()=>{
|
}
|
})
|
private paginationProps!:any;
|
|
get rowSelection() {
|
return {
|
selectedRowKeys: this.selectedRowKeys,
|
onChange: this.handleRowSelectChange,
|
getCheckboxProps: (record: any) => ({
|
props: {
|
disabled: record.disabled,
|
|
},
|
}),
|
};
|
}
|
|
private cleanSelectedKeys(): void {
|
this.handleRowSelectChange([], []);
|
}
|
|
private handleTableChange(pagination: any, filters: any, sorter: any): void {
|
|
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('selectChange')
|
private onSelectChange(selectedRowKeys: any, selectedRows: any) {
|
|
}
|
|
@Emit('tableChange')
|
private onTableChange(pagination: any, filters: any, sorter: any) {
|
|
}
|
|
}
|
</script>
|
