<template>
|
<div class="app-container">
|
<el-row>
|
<el-col :span="24">
|
<div slot="header" class="clearfix">
|
<span><b>表格展示</b></span>
|
</div>
|
<div style="width: 100%;display: flex;flex-direction: column;align-items: center;">
|
|
<!--查询条件-->
|
<!-- <el-form ref="queryForm" style="width: 100%" inline>
|
<el-form-item label="接口名" style="float: left" class="form_btn ">
|
<el-input v-model="selectItem.name" autocomplete="off"></el-input>
|
</el-form-item>
|
<el-form-item style="float: right" class="form_btn ">
|
<el-button icon="el-icon-search" @click="alert('暂时无法搜索')">搜索</el-button>
|
</el-form-item>
|
</el-form> -->
|
|
<HxlhTable
|
style="width: 100%"
|
:columns="columns"
|
:data="tableData"
|
:loading="loading"
|
:page="page"
|
@changePageNo="changePageNo"
|
@changePageSize="changePageSize"
|
>
|
</HxlhTable>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
|
<script setup>
|
|
import { ref, reactive, onMounted } from 'vue';
|
import HxlhTable from '@/components/HxlhTable'
|
|
// 搜索使用组件
|
const selectItem = reactive({
|
name: ''
|
});
|
|
// 表格 - 项目所有数据
|
const tableData = ref([
|
{ code: '111', name: '张三', sex: '男' },
|
{ code: '222', name: '李四', sex: '男' },
|
{ code: '333', name: '王五', sex: '男' },
|
{ code: '444', name: '赵六', sex: '女' }
|
]);
|
|
const mockData = ref([]);
|
|
for (let i = 0; i < 1000; i++) {
|
tableData.value.push({
|
code: `new${i + 1}`,
|
name: `新人${i + 1}`,
|
sex: '未知'
|
});
|
}
|
|
|
|
// 表格配置
|
const columns = ref([
|
{ type: 'seq', title: '序号', width: 60 },
|
{
|
title: '编号',
|
field: 'code'
|
},
|
{
|
title: '名称',
|
field: 'name'
|
},
|
{
|
title: '性别',
|
field: 'sex'
|
}
|
]);
|
|
// 表格缓冲
|
const loading = ref(false);
|
|
// 分页属性
|
const page = ref({
|
total: 1004,
|
current: 1,
|
size: 10
|
});
|
|
const changePageNo = async (currentPage) => {
|
console.log(currentPage);
|
page.value.current = currentPage;
|
// await fetchData();
|
}
|
|
const changePageSize = async (pageSize) => {
|
console.log(pageSize);
|
page.value.current = 1;
|
page.value.size = pageSize;
|
// await fetchData();
|
}
|
|
// 模拟数据加载
|
/* const fetchData = () => {
|
// 这里可以替换为实际的 API 请求
|
return new Promise((resolve) => {
|
const current = page.value.current;
|
const pageSize = page.value.size;
|
const start = (current - 1) * pageSize;
|
let end = start + pageSize;
|
if(end > tableData.value.length){
|
end = tableData.value.length;
|
}
|
const data = [];
|
for (let i = start; i < end; i++) {
|
console.log(tableData.value[i]);
|
data.push(tableData.value[i]);
|
}
|
// 模拟总记录数
|
// const total = 100;
|
mockData.value = data;
|
// pagerConfig.value.total = total;
|
resolve();
|
});
|
}; */
|
|
// 生命周期钩子，替代 mounted
|
onMounted(() => {
|
// 这里可以放置原来 mounted 钩子中的代码
|
});
|
|
// 初始化数据
|
// const initData = async () => {
|
// await fetchData();
|
// };
|
|
// initData();
|
</script>
|
|
<style scoped="scoped">
|
#view {
|
width: 100%;
|
height: 100%;
|
padding: 0px;
|
margin: 0px;
|
}
|
|
.box-card {
|
width: 480px;
|
}
|
</style>
|
|
|
