106 lines
2.5 KiB
TypeScript
106 lines
2.5 KiB
TypeScript
|
import type {
|
|||
|
|
LoadingConfig,
|
|||
|
|
AdaptiveConfig,
|
|||
|
|
PaginationProps
|
|||
|
|
} from "@pureadmin/table";
|
|||
|
|
import { tableData } from "../data";
|
|||
|
|
import { ref, onMounted, reactive } from "vue";
|
|||
|
|
import { clone, delay } from "@pureadmin/utils";
|
|||
|
|
|
|||
|
|
export function useColumns() {
|
|||
|
|
const dataList = ref([]);
|
|||
|
|
const loading = ref(true);
|
|||
|
|
const columns: TableColumnList = [
|
|||
|
|
{
|
|||
|
|
label: "日期",
|
|||
|
|
prop: "date"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "姓名",
|
|||
|
|
prop: "name"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "地址",
|
|||
|
|
prop: "address"
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
/** 分页配置 */
|
|||
|
|
const pagination = reactive<PaginationProps>({
|
|||
|
|
pageSize: 20,
|
|||
|
|
currentPage: 1,
|
|||
|
|
pageSizes: [20, 40, 60],
|
|||
|
|
total: 0,
|
|||
|
|
align: "right",
|
|||
|
|
background: true,
|
|||
|
|
small: false
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/** 加载动画配置 */
|
|||
|
|
const loadingConfig = reactive<LoadingConfig>({
|
|||
|
|
text: "正在加载第一页...",
|
|||
|
|
viewBox: "-10, -10, 50, 50",
|
|||
|
|
spinner: `
|
|||
|
|
<path class="path" d="
|
|||
|
|
M 30 15
|
|||
|
|
L 28 17
|
|||
|
|
M 25.61 25.61
|
|||
|
|
A 15 15, 0, 0, 1, 15 30
|
|||
|
|
A 15 15, 0, 1, 1, 27.99 7.5
|
|||
|
|
L 15 15
|
|||
|
|
" style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
|
|||
|
|
`
|
|||
|
|
// svg: "",
|
|||
|
|
// background: rgba()
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/** 撑满内容区自适应高度相关配置 */
|
|||
|
|
const adaptiveConfig: AdaptiveConfig = {
|
|||
|
|
/** 表格距离页面底部的偏移量，默认值为 `96` */
|
|||
|
|
offsetBottom: 110
|
|||
|
|
/** 是否固定表头，默认值为 `true`（如果不想固定表头，fixHeader设置为false并且表格要设置table-layout="auto"） */
|
|||
|
|
// fixHeader: true
|
|||
|
|
/** 页面 `resize` 时的防抖时间，默认值为 `60` ms */
|
|||
|
|
// timeout: 60
|
|||
|
|
/** 表头的 `z-index`，默认值为 `100` */
|
|||
|
|
// zIndex: 100
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function onSizeChange(val) {
|
|||
|
|
console.log("onSizeChange", val);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onCurrentChange(val) {
|
|||
|
|
loadingConfig.text = `正在加载第${val}页...`;
|
|||
|
|
loading.value = true;
|
|||
|
|
delay(600).then(() => {
|
|||
|
|
loading.value = false;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
delay(600).then(() => {
|
|||
|
|
const newList = [];
|
|||
|
|
Array.from({ length: 6 }).forEach(() => {
|
|||
|
|
newList.push(clone(tableData, true));
|
|||
|
|
});
|
|||
|
|
newList.flat(Infinity).forEach((item, index) => {
|
|||
|
|
dataList.value.push({ id: index, ...item });
|
|||
|
|
});
|
|||
|
|
pagination.total = dataList.value.length;
|
|||
|
|
loading.value = false;
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
loading,
|
|||
|
|
columns,
|
|||
|
|
dataList,
|
|||
|
|
pagination,
|
|||
|
|
loadingConfig,
|
|||
|
|
adaptiveConfig,
|
|||
|
|
onSizeChange,
|
|||
|
|
onCurrentChange
|
|||
|
|
};
|
|||
|
|
}
|