88 lines
1.8 KiB
Vue
88 lines
1.8 KiB
Vue
<script setup lang="tsx">
|
|
import SuperTable from '~/components/SuperTable.vue';
|
|
import type { TableProps } from 'tdesign-vue-next';
|
|
|
|
const pagination = ref<TableProps['pagination']>({
|
|
defaultPageSize: 10,
|
|
total: 100,
|
|
defaultCurrent: 1,
|
|
});
|
|
const columns = ref<TableProps['columns']>([
|
|
{
|
|
colKey: 'index',
|
|
title: '序号',
|
|
},
|
|
{
|
|
colKey: 'date',
|
|
title: '日期',
|
|
},
|
|
{
|
|
colKey: 'name',
|
|
title: '姓名',
|
|
},
|
|
{
|
|
colKey: 'province',
|
|
title: '省份',
|
|
},
|
|
{
|
|
colKey: 'city',
|
|
title: '市区',
|
|
},
|
|
{
|
|
colKey: 'address',
|
|
title: '地址',
|
|
},
|
|
{
|
|
colKey: '',
|
|
title: '邮编',
|
|
},
|
|
{
|
|
colKey: 'operator',
|
|
title: '操作',
|
|
cell: (_, { row }) => (
|
|
<div>
|
|
<t-button onClick={() => editUser(row)}>编辑</t-button>
|
|
<t-button onClick={() => deleteUser(row)}>删除</t-button>
|
|
</div>
|
|
),
|
|
},
|
|
]);
|
|
const data = ref([]);
|
|
for (let i = 0; i < 30; i++) {
|
|
data.value.push({
|
|
index: i + 1,
|
|
date: '2023-10-01',
|
|
name: 'John Doe',
|
|
province: 'Province A',
|
|
city: 'City A',
|
|
address: 'Address A',
|
|
postalCode: '123456',
|
|
} as never);
|
|
}
|
|
|
|
function editUser(row: never) {}
|
|
|
|
function deleteUser(row: never) {}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-6">
|
|
<div class="flex justify-between p-4">
|
|
<t-button>新增</t-button>
|
|
<t-input placeholder="搜索" clearable class="max-w-60">
|
|
<template #suffixIcon>
|
|
<search-icon :style="{ cursor: 'pointer' }" />
|
|
</template>
|
|
</t-input>
|
|
</div>
|
|
<super-table
|
|
:data="data"
|
|
:columns="columns"
|
|
:loading="false"
|
|
:pagination="pagination"
|
|
></super-table>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="less"></style>
|