fix: 数据过多不能滚动查看

gongchunyi

7 天以前 580d0e546a898cfed84e79570f9fc2edc6f34eb8

fix: 数据过多不能滚动查看

 src/views/system/user/index.vue

@@ -15,7 +15,7 @@
                </pane>

                <!--用户数据-->

                <pane size="84">

                    <el-col style="padding: 10px">

                    <el-col style="padding: 10px; height: 100%; display: flex; flex-direction: column;">

                        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">

                            <el-form-item label="登录账号" prop="userName">

                                <el-input v-model="queryParams.userName" placeholder="请输入登录账号" clearable style="width: 240px" @keyup.enter="handleQuery" />

@@ -56,45 +56,47 @@
                            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>

                        </el-row>

                        

                        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">

                            <el-table-column type="selection" width="50" align="center" />

                            <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />

                            <el-table-column label="登录账号" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />

                            <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />

                            <el-table-column label="部门" align="center" key="deptNames" prop="deptNames" v-if="columns[3].visible" :show-overflow-tooltip="true" />

                            <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />

                            <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">

                                <template #default="scope">

                                    <el-switch

                                        v-model="scope.row.status"

                                        active-value="0"

                                        inactive-value="1"

                                        @change="handleStatusChange(scope.row)"

                                    ></el-switch>

                                </template>

                            </el-table-column>

                            <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">

                                <template #default="scope">

                                    <span>{{ parseTime(scope.row.createTime) }}</span>

                                </template>

                            </el-table-column>

                            <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">

                                <template #default="scope">

                                    <el-tooltip content="修改" placement="top" v-if="scope.row.userId !== 1">

                                        <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']"></el-button>

                                    </el-tooltip>

                                    <el-tooltip content="删除" placement="top" v-if="scope.row.userId !== 1">

                                        <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']"></el-button>

                                    </el-tooltip>

                                    <el-tooltip content="重置密码" placement="top" v-if="scope.row.userId !== 1">

                                        <el-button link type="primary" icon="Key" @click="handleResetPwd(scope.row)" v-hasPermi="['system:user:resetPwd']"></el-button>

                                    </el-tooltip>

                                    <el-tooltip content="分配角色" placement="top" v-if="scope.row.userId !== 1">

                                        <el-button link type="primary" icon="CircleCheck" @click="handleAuthRole(scope.row)" v-hasPermi="['system:user:edit']"></el-button>

                                    </el-tooltip>

                                </template>

                            </el-table-column>

                        </el-table>

                        <div style="flex: 1; overflow: hidden;">

                            <el-table v-loading="loading" :data="userList" height="100%" @selection-change="handleSelectionChange">

                                <el-table-column type="selection" width="50" align="center" />

                                <el-table-column label="用户编号" align="center" key="userId" prop="userId" v-if="columns[0].visible" />

                                <el-table-column label="登录账号" align="center" key="userName" prop="userName" v-if="columns[1].visible" :show-overflow-tooltip="true" />

                                <el-table-column label="用户昵称" align="center" key="nickName" prop="nickName" v-if="columns[2].visible" :show-overflow-tooltip="true" />

                                <el-table-column label="部门" align="center" key="deptNames" prop="deptNames" v-if="columns[3].visible" :show-overflow-tooltip="true" />

                                <el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber" v-if="columns[4].visible" width="120" />

                                <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">

                                    <template #default="scope">

                                        <el-switch

                                            v-model="scope.row.status"

                                            active-value="0"

                                            inactive-value="1"

                                            @change="handleStatusChange(scope.row)"

                                        ></el-switch>

                                    </template>

                                </el-table-column>

                                <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">

                                    <template #default="scope">

                                        <span>{{ parseTime(scope.row.createTime) }}</span>

                                    </template>

                                </el-table-column>

                                <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">

                                    <template #default="scope">

                                        <el-tooltip content="修改" placement="top" v-if="scope.row.userId !== 1">

                                            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:user:edit']"></el-button>

                                        </el-tooltip>

                                        <el-tooltip content="删除" placement="top" v-if="scope.row.userId !== 1">

                                            <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']"></el-button>

                                        </el-tooltip>

                                        <el-tooltip content="重置密码" placement="top" v-if="scope.row.userId !== 1">

                                            <el-button link type="primary" icon="Key" @click="handleResetPwd(scope.row)" v-hasPermi="['system:user:resetPwd']"></el-button>

                                        </el-tooltip>

                                        <el-tooltip content="分配角色" placement="top" v-if="scope.row.userId !== 1">

                                            <el-button link type="primary" icon="CircleCheck" @click="handleAuthRole(scope.row)" v-hasPermi="['system:user:edit']"></el-button>

                                        </el-tooltip>

                                    </template>

                                </el-table-column>

                            </el-table>

                        </div>

                        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />

                    </el-col>

                </pane>