<template>
<div>
<div style="height: 30px; text-align: right">
<a-popover title="Please select the columns to display" placement="topRight">
<template slot="content">
<a-checkbox
v-for="c in columns"
:key="c.title"
@change="onCheckChange"
:checked="c.colSpan != 0"
:value="c.title"
>
{ { c.title }}
</a-checkbox>
</template>
<a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
Filter column<a-icon type="down" />
</a>
</a-popover>
</div>
<a-table
:rowSelection="rowSelection_"
rowKey="id"
:pagination="pagination_"
:dataSource="dataSource_"
:components="components_"
v-bind="$props"
v-on="$listeners"
:columns="columns_"
@change="handleTableChange"
:rowClassName="
(record, index) => {
if (stripe && index % 2 != 0) return 'stripe';
}
"
>
<template
v-for="column in columns"
:slot="column.scopedSlots ? column.scopedSlots.customRender : ''"
slot-scope="text, record"
>
<slot
:name="column.scopedSlots ? column.scopedSlots.customRender : ''"
v-bind:scope="record"
></slot>
</template>
</a-table>
</div>
</template>
<script>
import { Table } from "ant-design-vue";
import VueDraggableResizable from "vue-draggable-resizable";
export default {
components_: {
VueDraggableResizable,
},
props: {
...Table.props,
stripe: { type: Boolean },
api: { type: String },
queryParams: { type: Object },
},
data() {
this.components_ = {
header: {
cell: (h, props, children) => {
const { key, ...restProps } = props;
const col = this.columns.find((col) => {
const k = col.dataIndex || col.key;
return k === key;
});
if (!col || !col.width) {
return h("th", { ...restProps }, [...children]);
}
const dragProps = {
key: col.dataIndex || col.key,
class: "table-draggable-handle",
attrs: {
w: 10,
x: col.width,
z: 1,
axis: "x",
draggable: true,
resizable: false,
},
on: {
dragging: (x, y) => {
col.width = Math.max(x, 1);
},
},
};
const drag = h("vue-draggable-resizable", { ...dragProps });
return h("th", { ...restProps, class: "resize-table-th" }, [
...children,
drag,
]);
},
},
};
return {
rowSelection_: this.rowSelection==undefined?undefined:{ onChange: this.onSelectChange },
selectedRowKeys: [],
selectedRows: [],
columns_: this.columns,
dataSource_: [],
loading_: false,
pagination_: {
total: 0,
pageSizeOptions: ["10", "20", "30", "40", "100"],
current: 1,
defaultPageSize: 10,
showQuickJumper: false,
showSizeChanger: true,
showTotal: (total, range) =>
`Display ${range[0]} ~ ${range[1]} records, a total of ${total} records`,
},
};
},
mounted() {
this.fetch();
},
methods: {
//Filter columns
onCheckChange(e) {
console.log("checkChange", e.target.checked, e.target.value);
let index;
this.columns.forEach((ele, i) => {
if (ele.title === e.target.value) index = i;
});
if (!e.target.checked) {
let col = { ...this.columns[index] };
col.colSpan = 0;
this.columns_.splice(index, 1, col);
}
if (e.target.checked) {
let col = { ...this.columns[index] };
col.colSpan = 1;
this.columns_.splice(index, 1, col);
}
},
//select row
onSelectChange(selectedRowKeys, selectedRows) {
console.log("test select line");
this.selectedRowKeys = selectedRowKeys;
this.selectedRows = selectedRows;
},
//pagination
handleTableChange(pagination, filters, sorter) {
this.pagination_ = pagination;
this.fetch();
},
fetch() {
this.loading_ = true;
this.$post(this.api, {
...this.queryParams,
pageSize: this.pagination_.pageSize,
pageNum: this.pagination_.current,
})
.then((res) => {
let data = res.data;
this.pagination_.total = data.total;
this.dataSource_ = data.rows;
this.loading_ = false;
})
.catch((err) => {
console.warn(err);
});
},
},
};
</script>
<style lang="less">
.table-draggable-handle {
/* width: 10px !important; */
height: 100% !important;
left: auto !important;
right: -5px;
cursor: col-resize;
touch-action: none;
border: none;
position: absolute;
transform: none !important;
bottom: 0;
}
.resize-table-th {
position: relative;
}
.stripe {
background-color: #fafafa;
}
</style>