vue3 简单的element plus 表格table 页面基础模板

简单的基础模板

<template>
    <div class="expiredItems-container">
        <el-card>
            <el-table border :data="tableInfoState.data" v-loading="tableInfoState.loading" style="margin-top: 10px">
                <el-table-column align="center" label="序号" width="65">
                    <template #default="{ $index }">
                        {{ $index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="批次名称" min-width="179" prop="batchNumber" />    
                <el-table-column align="center" label="物品名称" min-width="109" prop="itemName" />
                <el-table-column align="center" label="剩余库存" min-width="109" prop="remainingStock" />
                <el-table-column prop="expiryDate" label="过期时间" min-width="109" show-overflow-tooltip>
                    <template #default="scope">
                        <span>{{ dayjs(scope.row.expiryDate).format('YYYY-MM-DD HH:mm:ss') }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>
<script setup lang="ts" name="tasks">
import { reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage, dayjs } from 'element-plus';
import request from '/@/utils/requestTools';
// 表格数据相关
const tableInfoState = reactive({
    data: [],
    total: 0,
    loading: false,
    param: {
        key: '',
        pageIndex: 1,
        pageSize: 10,
    },
});
onMounted(() => {
    getExpiryBatchStatistics();
});
const getExpiryBatchStatistics = async () => {
    tableInfoState.loading = true;
    const result: any = await request.get('/watertap/api/Batches/GetExpiryBatchStatistics', tableInfoState.param);
    tableInfoState.data = result.data.data;
    tableInfoState.loading = false;
};
</script>
<style scoped="scoped" lang="scss">
.expiredItems-container {
    padding: 15px;
}
</style>

包含分页条与搜索框的

<template>
    <div class="expiredItems-container">
        <el-card>
            <div class="toolbar">
                <div>
                    <el-button type="primary" :icon="Plus" size="default" >添加 </el-button>
                </div>
                <div class="search">
                    <!-- <el-select v-model="tableInfoState.param.levelId" class="select-level searchinput" size="default" clearable>
                        <el-option v-for="sh in levelList" :key="sh.id" :value="sh.id" :label="sh.label" />
                    </el-select> -->
                    <el-input v-model="tableInfoState.param.key" placeholder="名称" class="searchinput" size="default" clearable />
                    <el-button type="primary" :icon="Search" size="default" @click="getExpiryBatchStatistics">搜索</el-button>
                </div>
            </div>
            <el-table border :data="tableInfoState.data" v-loading="tableInfoState.loading" style="margin-top: 10px">
                <el-table-column align="center" label="序号" width="65">
                    <template #default="{ $index }">
                        {{ $index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="批次名称" min-width="179" prop="batchNumber" />
                <el-table-column align="center" label="物品名称" min-width="109" prop="itemName" />
                <el-table-column align="center" label="剩余库存" min-width="109" prop="remainingStock" />
                <el-table-column prop="expiryDate" label="过期时间" min-width="109" show-overflow-tooltip>
                    <template #default="scope">
                        <span>{{ dayjs(scope.row.expiryDate).format('YYYY-MM-DD HH:mm:ss') }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin: 20px auto; text-align: center; display: flex; justify-content: center">
                <el-pagination
                    background
                    size="default"
                    @current-change="handleCurrentChange"
                    layout="total,sizes,prev, pager, next"
                    :page-sizes="[5, 10, 20, 30]"
                    @size-change="handleSizeChange"
                    :current-page="tableInfoState.param.pageIndex"
                    :page-size="tableInfoState.param.pageSize"
                    :total="tableInfoState.total"
                />
            </div>
        </el-card>
    </div>
</template>
<script setup lang="ts" name="tasks">
import { reactive, onMounted, ref } from 'vue';
import { Search, Plus, Edit } from '@element-plus/icons-vue';
import { ElMessageBox, ElMessage, dayjs } from 'element-plus';
import request from '/@/utils/requestTools';
// 表格数据相关
const tableInfoState = reactive({
    data: [],
    total: 0,
    loading: false,
    param: {
        key: '',
        pageIndex: 1,
        pageSize: 10,
    },
});
onMounted(() => {
    getExpiryBatchStatistics();
});
const getExpiryBatchStatistics = async () => {
    tableInfoState.loading = true;
    const result: any = await request.get('/watertap/api/Batches/GetExpiryBatchStatistics', tableInfoState.param);
    tableInfoState.data = result.data.data;
    tableInfoState.total = result.data.dataCount;
    tableInfoState.loading = false;
};
const handleCurrentChange = (val: number) => {
    tableInfoState.param.pageIndex = val;
    getExpiryBatchStatistics();
};
const handleSizeChange = (val: number) => {
    // 改变了每页的条数后重新从第一页开始吧
    tableInfoState.param.pageIndex = 1;
    tableInfoState.param.pageSize = val;
    getExpiryBatchStatistics();
};
</script>
<style scoped="scoped" lang="scss">
.expiredItems-container {
    padding: 15px;
    .toolbar {
        display: flex;
        justify-content: space-between;
        .search {
            display: flex;
            .searchinput {
                width: 199px;
            }
        }
        .search > * {
            margin-left: 6px;
        }
    }
}
</style>