You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
3.9 KiB
Vue
135 lines
3.9 KiB
Vue
<template>
|
|
<base-container>
|
|
<base-header>
|
|
<el-card>
|
|
<el-form
|
|
:model="form"
|
|
:inline="true"
|
|
>
|
|
<el-form-item label="姓名">
|
|
<el-input
|
|
v-model="form.firstName"
|
|
placeholder="请输入姓名"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="名称">
|
|
<el-input
|
|
v-model="form.lastName"
|
|
placeholder="请输入名称"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="生日">
|
|
<el-input
|
|
v-model="form.birthday"
|
|
placeholder="请输入生日"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="邮箱">
|
|
<el-input
|
|
v-model="form.email"
|
|
placeholder="请输入邮箱"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="性别"
|
|
praceholder="请选择性别"
|
|
style="width: 150px"
|
|
>
|
|
<el-select v-model="form.sex">
|
|
<el-option
|
|
label="男"
|
|
value="male"
|
|
></el-option>
|
|
<el-option
|
|
label="女"
|
|
value="female"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-row justify="end">
|
|
<el-button
|
|
type="primary"
|
|
@click="handleSearchFN"
|
|
>查询</el-button
|
|
>
|
|
|
|
<el-button
|
|
type="primary"
|
|
class="mr-5"
|
|
>新增</el-button
|
|
>
|
|
</el-row>
|
|
</el-card>
|
|
</base-header>
|
|
<pure-table
|
|
border
|
|
class="base-main"
|
|
:data="tableData"
|
|
:columns="columns"
|
|
size="large"
|
|
v-loading="loading"
|
|
/>
|
|
<base-footer>
|
|
<el-card>
|
|
<el-pagination
|
|
v-model:current-page="pagination.currentPage"
|
|
v-model:page-size="pagination.pageSize"
|
|
v-bind="pagination"
|
|
@change="handlePaginationChangeFN"
|
|
/>
|
|
</el-card>
|
|
</base-footer>
|
|
</base-container>
|
|
</template>
|
|
|
|
<script setup lang="jsx">
|
|
import { ref } from 'vue';
|
|
import { useTable } from '@/hooks/useTable';
|
|
import { getTableList } from '@/api/table';
|
|
defineOptions({
|
|
name: 'TemplateLayout',
|
|
});
|
|
const form = ref({
|
|
firstName: '',
|
|
lastName: '',
|
|
birthday: '',
|
|
email: '',
|
|
sex: '',
|
|
});
|
|
|
|
const columns = [
|
|
{
|
|
label: '序号',
|
|
type: 'index',
|
|
width: 70,
|
|
},
|
|
{
|
|
label: '姓名',
|
|
prop: 'firstName',
|
|
},
|
|
{
|
|
label: '名称',
|
|
prop: 'lastName',
|
|
},
|
|
{
|
|
label: '生日',
|
|
prop: 'birthday',
|
|
},
|
|
{
|
|
label: '邮箱',
|
|
prop: 'email',
|
|
},
|
|
{
|
|
label: '性别',
|
|
prop: 'sex',
|
|
},
|
|
];
|
|
const { loading, tableData, pagination, handleRequestDataFN, handleSearchFN, handlePaginationChangeFN, handleDeleteItemFN } = useTable({
|
|
searchForm: form.value,
|
|
requestDataFN: getTableList,
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|