github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-08-27 11:35:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(table): add table component

Browse Source
This commit is contained in:
陈文彬
2020-10-08 01:35:05 +08:00
parent 5b0a21ecb0
commit faf3f4602e
71 changed files with 3948 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

292
src/views/demo/table/tableData.tsx Normal file
View File

@@ -0,0 +1,292 @@
import { FormProps, FormSchema } from '/@/components/Table';
import { BasicColumn } from '/@/components/Table/src/types/table';
export function getBasicColumns(): BasicColumn[] {
return [
{
title: 'ID',
width: 150,
dataIndex: 'id',
},
{
title: '姓名',
dataIndex: 'name',
width: 120,
},
{
title: '地址',
dataIndex: 'address',
},
{
title: '编号',
dataIndex: 'no',
width: 80,
},
{
title: '开始时间',
dataIndex: 'beginTime',
},
{
title: '结束时间',
sorter: true,
dataIndex: 'endTime',
},
];
}
export function getBasicShortColumns(): BasicColumn[] {
return [
{
title: 'ID',
width: 150,
dataIndex: 'id',
},
{
title: '姓名',
dataIndex: 'name',
width: 120,
},
{
title: '地址',
dataIndex: 'address',
},
{
title: '编号',
dataIndex: 'no',
width: 80,
},
];
}
export function getMultipleHeaderColumns(): BasicColumn[] {
return [
{
title: 'ID',
dataIndex: 'id',
width: 200,
},
{
title: '姓名',
dataIndex: 'name',
width: 120,
},
{
title: '地址',
dataIndex: 'address',
sorter: true,
children: [
{
title: '编号',
dataIndex: 'no',
width: 120,
filters: [
{ text: 'Male', value: 'male' },
{ text: 'Female', value: 'female' },
],
},
{
title: '开始时间',
dataIndex: 'beginTime',
width: 120,
},
{
title: '结束时间',
dataIndex: 'endTime',
width: 120,
},
],
},
];
}
export function getCustomHeaderColumns(): BasicColumn[] {
return [
{
title: 'ID',
dataIndex: 'id',
width: 200,
},
{
// title: '姓名',
dataIndex: 'name',
width: 120,
slots: { title: 'customTitle' },
},
{
// title: '地址',
dataIndex: 'address',
slots: { title: 'customAddress' },
sorter: true,
},
{
title: '编号',
dataIndex: 'no',
width: 120,
filters: [
{ text: 'Male', value: 'male' },
{ text: 'Female', value: 'female' },
],
},
{
title: '开始时间',
dataIndex: 'beginTime',
width: 120,
},
{
title: '结束时间',
dataIndex: 'endTime',
width: 120,
},
];
}
const renderContent = ({ text, index }: { text: any; index: number }) => {
const obj: any = {
children: text,
attrs: {},
};
if (index === 9) {
obj.attrs.colSpan = 0;
}
return obj;
};
export function getMergeHeaderColumns(): BasicColumn[] {
return [
{
title: 'ID',
dataIndex: 'id',
width: 300,
customRender: renderContent,
},
{
title: '姓名',
dataIndex: 'name',
width: 300,
customRender: renderContent,
},
{
title: '地址',
dataIndex: 'address',
colSpan: 2,
width: 120,
sorter: true,
customRender: ({ text, index }: { text: any; index: number }) => {
const obj: any = {
children: text,
attrs: {},
};
if (index === 2) {
obj.attrs.rowSpan = 2;
}
if (index === 3) {
obj.attrs.colSpan = 0;
}
return obj;
},
},
{
title: '编号',
dataIndex: 'no',
colSpan: 0,
filters: [
{ text: 'Male', value: 'male' },
{ text: 'Female', value: 'female' },
],
customRender: renderContent,
},
{
title: '开始时间',
dataIndex: 'beginTime',
width: 200,
customRender: renderContent,
},
{
title: '结束时间',
dataIndex: 'endTime',
width: 200,
customRender: renderContent,
},
];
}
export const getAdvanceSchema = (itemNumber = 6): FormSchema[] => {
const arr: any = [];
for (let index = 0; index < itemNumber; index++) {
arr.push({
field: `field${index}`,
label: `字段${index}`,
component: 'Input',
colProps: {
xl: 12,
xxl: 8,
},
});
}
return arr;
};
export function getFormConfig(): Partial<FormProps> {
return {
labelWidth: 100,
schemas: getAdvanceSchema(6),
};
}
export function getBasicData() {
const data: any = (() => {
const arr: any = [];
for (let index = 0; index < 40; index++) {
arr.push({
id: `${index}`,
name: 'John Brown',
age: `1${index}`,
no: `${index + 10}`,
address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park',
beginTime: new Date().toLocaleString(),
endTime: new Date().toLocaleString(),
});
}
return arr;
})();
return data;
}
export function getTreeTableData() {
const data: any = (() => {
const arr: any = [];
for (let index = 0; index < 40; index++) {
arr.push({
id: `${index}`,
name: 'John Brown',
age: `1${index}`,
no: `${index + 10}`,
address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park',
beginTime: new Date().toLocaleString(),
endTime: new Date().toLocaleString(),
children: [
{
id: `l2-${index}`,
name: 'John Brown',
age: `1${index}`,
no: `${index + 10}`,
address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park',
beginTime: new Date().toLocaleString(),
endTime: new Date().toLocaleString(),
children: [
{
id: `l3-${index}`,
name: 'John Brown',
age: `1${index}`,
no: `${index + 10}`,
address: 'New York No. 1 Lake ParkNew York No. 1 Lake Park',
beginTime: new Date().toLocaleString(),
endTime: new Date().toLocaleString(),
},
],
},
],
});
}
return arr;
})();
return data;
}