Fix TableCustom pagination props.
parent
6a7019ec1a
commit
2dd7cbfa15
|
@ -3,8 +3,9 @@
|
|||
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
|
||||
<div class="container">
|
||||
|
||||
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
|
||||
:delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit">
|
||||
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :currentPage="page.index"
|
||||
:pageSize="page.size" :viewFunc="handleView" :delFunc="handleDelete" :changePage="changePage"
|
||||
:editFunc="handleEdit">
|
||||
<template #toolbarBtn>
|
||||
<el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
|
||||
</template>
|
||||
|
@ -42,7 +43,7 @@ import { Role } from '@/types/role';
|
|||
import { fetchRoleData } from '@/api';
|
||||
import TableCustom from '@/components/table-custom.vue';
|
||||
import TableDetail from '@/components/table-detail.vue';
|
||||
import RolePermission from './role-permission.vue'
|
||||
import RolePermission from './role-permission.vue';
|
||||
import { CirclePlusFilled } from '@element-plus/icons-vue';
|
||||
import { FormOption, FormOptionList } from '@/types/form-option';
|
||||
|
||||
|
@ -52,7 +53,7 @@ const query = reactive({
|
|||
});
|
||||
const searchOpt = ref<FormOptionList[]>([
|
||||
{ type: 'input', label: '角色名称:', prop: 'name' }
|
||||
])
|
||||
]);
|
||||
const handleSearch = () => {
|
||||
changePage(1);
|
||||
};
|
||||
|
@ -65,15 +66,15 @@ let columns = ref([
|
|||
{ prop: 'status', label: '状态' },
|
||||
{ prop: 'permissions', label: '权限管理' },
|
||||
{ prop: 'operator', label: '操作', width: 250 },
|
||||
])
|
||||
]);
|
||||
const page = reactive({
|
||||
index: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
})
|
||||
});
|
||||
const tableData = ref<Role[]>([]);
|
||||
const getData = async () => {
|
||||
const res = await fetchRoleData()
|
||||
const res = await fetchRoleData();
|
||||
tableData.value = res.data.list;
|
||||
page.total = res.data.pageTotal;
|
||||
};
|
||||
|
@ -92,7 +93,7 @@ const options = ref<FormOption>({
|
|||
{ type: 'input', label: '角色标识', prop: 'key', required: true },
|
||||
{ type: 'switch', label: '状态', prop: 'status', required: false, activeText: '启用', inactiveText: '禁用' },
|
||||
]
|
||||
})
|
||||
});
|
||||
const visible = ref(false);
|
||||
const isEdit = ref(false);
|
||||
const rowData = ref({});
|
||||
|
@ -119,7 +120,7 @@ const viewData = ref({
|
|||
column: 1
|
||||
});
|
||||
const handleView = (row: Role) => {
|
||||
viewData.value.row = { ...row }
|
||||
viewData.value.row = { ...row };
|
||||
viewData.value.list = [
|
||||
{
|
||||
prop: 'id',
|
||||
|
@ -137,26 +138,26 @@ const handleView = (row: Role) => {
|
|||
prop: 'status',
|
||||
label: '角色状态',
|
||||
},
|
||||
]
|
||||
];
|
||||
visible1.value = true;
|
||||
};
|
||||
|
||||
// 删除相关
|
||||
const handleDelete = (row: Role) => {
|
||||
ElMessage.success('删除成功');
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// 权限管理弹窗相关
|
||||
const visible2 = ref(false);
|
||||
const permissOptions = ref({})
|
||||
const permissOptions = ref({});
|
||||
const handlePermission = (row: Role) => {
|
||||
visible2.value = true;
|
||||
permissOptions.value = {
|
||||
id: row.id,
|
||||
permiss: row.permiss
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
|
@ -2,8 +2,9 @@
|
|||
<div>
|
||||
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
|
||||
<div class="container">
|
||||
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
|
||||
:delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit">
|
||||
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :currentPage="page.index"
|
||||
:pageSize="page.size" :viewFunc="handleView" :delFunc="handleDelete" :changePage="changePage"
|
||||
:editFunc="handleEdit">
|
||||
<template #toolbarBtn>
|
||||
<el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
|
||||
</template>
|
||||
|
@ -37,7 +38,7 @@ const query = reactive({
|
|||
});
|
||||
const searchOpt = ref<FormOptionList[]>([
|
||||
{ type: 'input', label: '用户名:', prop: 'name' }
|
||||
])
|
||||
]);
|
||||
const handleSearch = () => {
|
||||
changePage(1);
|
||||
};
|
||||
|
@ -49,15 +50,15 @@ let columns = ref([
|
|||
{ prop: 'phone', label: '手机号' },
|
||||
{ prop: 'role', label: '角色' },
|
||||
{ prop: 'operator', label: '操作', width: 250 },
|
||||
])
|
||||
]);
|
||||
const page = reactive({
|
||||
index: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
})
|
||||
});
|
||||
const tableData = ref<User[]>([]);
|
||||
const getData = async () => {
|
||||
const res = await fetchUserData()
|
||||
const res = await fetchUserData();
|
||||
tableData.value = res.data.list;
|
||||
page.total = res.data.pageTotal;
|
||||
};
|
||||
|
@ -79,7 +80,7 @@ let options = ref<FormOption>({
|
|||
{ type: 'input', label: '邮箱', prop: 'email', required: true },
|
||||
{ type: 'input', label: '角色', prop: 'role', required: true },
|
||||
]
|
||||
})
|
||||
});
|
||||
const visible = ref(false);
|
||||
const isEdit = ref(false);
|
||||
const rowData = ref({});
|
||||
|
@ -105,7 +106,7 @@ const viewData = ref({
|
|||
list: []
|
||||
});
|
||||
const handleView = (row: User) => {
|
||||
viewData.value.row = { ...row }
|
||||
viewData.value.row = { ...row };
|
||||
viewData.value.list = [
|
||||
{
|
||||
prop: 'id',
|
||||
|
@ -135,14 +136,14 @@ const handleView = (row: User) => {
|
|||
prop: 'date',
|
||||
label: '注册日期',
|
||||
},
|
||||
]
|
||||
];
|
||||
visible1.value = true;
|
||||
};
|
||||
|
||||
// 删除相关
|
||||
const handleDelete = (row: User) => {
|
||||
ElMessage.success('删除成功');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
|
@ -2,9 +2,9 @@
|
|||
<div>
|
||||
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
|
||||
<div class="container">
|
||||
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
|
||||
:delFunc="handleDelete" :editFunc="handleEdit" :refresh="getData" :currentPage="page.index"
|
||||
:changePage="changePage">
|
||||
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :currentPage="page.index"
|
||||
:pageSize="page.size" :viewFunc="handleView" :delFunc="handleDelete" :editFunc="handleEdit"
|
||||
:refresh="getData" :changePage="changePage">
|
||||
<template #toolbarBtn>
|
||||
<el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
|
||||
</template>
|
||||
|
@ -59,7 +59,7 @@ const query = reactive({
|
|||
});
|
||||
const searchOpt = ref<FormOptionList[]>([
|
||||
{ type: 'input', label: '用户名:', prop: 'name' }
|
||||
])
|
||||
]);
|
||||
const handleSearch = () => {
|
||||
changePage(1);
|
||||
};
|
||||
|
@ -73,15 +73,15 @@ let columns = ref([
|
|||
{ prop: 'thumb', label: '头像' },
|
||||
{ prop: 'state', label: '账户状态' },
|
||||
{ prop: 'operator', label: '操作', width: 250 },
|
||||
])
|
||||
]);
|
||||
const page = reactive({
|
||||
index: 1,
|
||||
size: 10,
|
||||
total: 200,
|
||||
})
|
||||
});
|
||||
const tableData = ref<TableItem[]>([]);
|
||||
const getData = async () => {
|
||||
const res = await fetchData()
|
||||
const res = await fetchData();
|
||||
tableData.value = res.data.list;
|
||||
};
|
||||
getData();
|
||||
|
@ -101,7 +101,7 @@ let options = ref<FormOption>({
|
|||
{ type: 'switch', activeText: '正常', inactiveText: '异常', label: '账户状态', prop: 'state', required: true },
|
||||
{ type: 'upload', label: '头像', prop: 'thumb', required: true },
|
||||
]
|
||||
})
|
||||
});
|
||||
const visible = ref(false);
|
||||
const isEdit = ref(false);
|
||||
const rowData = ref({});
|
||||
|
@ -127,7 +127,7 @@ const viewData = ref({
|
|||
list: []
|
||||
});
|
||||
const handleView = (row: TableItem) => {
|
||||
viewData.value.row = { ...row }
|
||||
viewData.value.row = { ...row };
|
||||
viewData.value.list = [
|
||||
{
|
||||
prop: 'id',
|
||||
|
@ -149,14 +149,14 @@ const handleView = (row: TableItem) => {
|
|||
prop: 'thumb',
|
||||
label: '头像',
|
||||
},
|
||||
]
|
||||
];
|
||||
visible1.value = true;
|
||||
};
|
||||
|
||||
// 删除相关
|
||||
const handleDelete = (row: TableItem) => {
|
||||
ElMessage.success('删除成功');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
Loading…
Reference in New Issue