pblUserManage/src/components/organList.vue

<template>
    <div class="list_container">
        <div class="title_examine">
            <div class="pub_title">组织列表</div>
        </div>
        <div class="tableBox">
            <el-table :data="organizations" stripe border style="width: 100%" :header-cell-style="headerCellStyle">
                <el-table-column show-overflow-tooltip prop="name" label="组织名称" min-width="45"></el-table-column>
                <el-table-column show-overflow-tooltip prop="code" label="编码" min-width="45"></el-table-column>
                <el-table-column show-overflow-tooltip prop="ctime" label="创建时间" min-width="45"></el-table-column>
                <el-table-column label="操作" width="150px">
                    <template slot-scope="scope">
                        <div class="operate">
                            <button style="color: #308fff;" @click="update(scope.row)">编辑</button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页组件 -->
        <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total"
            @current-change="handlePageChange" layout="total,prev, pager, next, jumper">
        </el-pagination>
    </div>
</template>
<script>
import { API_CONFIG } from '@/common/apiConfig';
export default {
    name: 'onList',
    data() {
        return {
            organizations: [],
            currentPage:1,
            pageSize: 10,
            total: 0
        }
    },
    methods: {
        // 表头的背景色
        headerCellStyle() {
            return { backgroundColor: "#f1f1f1" };
        },
        getOrgan() {
            let params = [
                {
                    functionName: "getOrgan",
                    page: this.currentPage,
                    num: this.pageSize,
                }
            ];
            this.$ajax
                .post(API_CONFIG.baseUrl, params)
                .then((res) => {
                    // console.log("返回的数据为：", res.data);  // 检查返回的数据
                    if (res.data && Array.isArray(res.data[0])) {
                        // 使用 map() 提取所有组织名称
                        this.organizations = res.data[0]
                        this.total = res.data[0][0].num
                        console.log(this.organizations);
                        
                    }

                })
                .catch((err) => {
                    this.$message.error("查询失败");
                    console.error("请求失败，错误信息：", err);
                });
        },
        // 页码扩展按钮
        handlePageChange(page) {
            this.currentPage = page;
            this.getOrgan();
        },
    },
    mounted() {
        this.getOrgan()
    }
}
</script>
<style scoped>
.list_container {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
}

.tableBox {
    margin: 10px 0;
}

.operate button {
    background: none;
    border: none;
    cursor: pointer;
}
</style>