From a5e841edeb90e8b3306a395d40fd4953d092ead6 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期五, 19 九月 2025 17:43:43 +0800
Subject: [PATCH] 优化
---
admin/src/layouts/TableLayout.vue | 192 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 192 insertions(+), 0 deletions(-)
diff --git a/admin/src/layouts/TableLayout.vue b/admin/src/layouts/TableLayout.vue
new file mode 100644
index 0000000..28b3a81
--- /dev/null
+++ b/admin/src/layouts/TableLayout.vue
@@ -0,0 +1,192 @@
+<template>
+ <div class="table-layout" >
+ <!-- 澶撮儴 -->
+ <!-- <div v-if="withBreadcrumb" class="table-header">
+ <el-breadcrumb separator="/">
+ <el-breadcrumb-item v-for="path in paths" :key="path">{{path}}</el-breadcrumb-item>
+ </el-breadcrumb>
+ </div>-->
+ <!-- <div style="height:10px;"></div> -->
+ <Profile :roles="roles" :permissions="permissions">
+ <!-- 鎼滅储琛ㄥ崟閮ㄥ垎 -->
+ <div class="table-search-form" ref="tableSearchForm">
+ <div class="form-wrap">
+ <slot name="search-form"></slot>
+ </div>
+ </div>
+ <slot name="space"></slot>
+ <!-- 鍒楄〃鍜屽垎椤甸儴鍒� -->
+ <div class="table-content">
+ <div class="table-wrap">
+ <slot name="table-wrap"></slot>
+ </div>
+ </div>
+ <slot></slot>
+ </Profile>
+ </div>
+</template>
+
+<script>
+import Profile from '../components/common/Profile'
+export default {
+ name: 'TableLayout',
+ components: { Profile },
+ props: {
+ // 瑙掕壊
+ roles: {
+ type: Array
+ },
+ // 鏉冮檺
+ permissions: {
+ type: Array
+ },
+ // 鏄惁灞曠ず澶撮儴闈㈠寘灞�
+ withBreadcrumb: {
+ type: Boolean,
+ default: true
+ }
+ },
+ computed: {
+ paths () {
+ return this.$route.meta.paths
+ }
+ },
+ mounted() {
+
+ }
+}
+</script>
+
+<style lang="scss">
+@import "@/assets/style/variables.scss";
+/*.el-container .el-main[data-v-5b01577c] {
+ width: 100%;
+ height: calc(100vh - 68px);
+ padding: 0;
+ position: relative;
+ display: flex
+;
+ flex-direction: column;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+}*/
+.table-layout {
+ height: calc(100%-10px);
+ display: flex;
+ flex-direction: column;
+ margin-top: 10px;
+ .not-allow-wrap {
+ padding-top: 0;
+ }
+}
+.danger-column{
+ color: red;
+}
+// 澶撮儴
+.table-header {
+ overflow: hidden;
+ padding: 12px 16px;
+ flex-shrink: 0;
+ // 椤甸潰璺緞
+ .el-breadcrumb {
+ .el-breadcrumb__item {
+ .el-breadcrumb__inner {
+ color: #ABB2BE;
+ font-size: 12px;
+ }
+ &:last-of-type .el-breadcrumb__inner {
+ color: #606263;
+ font-size: 14px;
+ }
+ }
+ }
+}
+// 鎼滅储
+.table-search-form {
+ display: flex;
+ flex-wrap: wrap;
+ padding: 0 16px;
+ margin-bottom: 10px;
+ .form-wrap {
+ padding: 16px 16px 0 16px;
+ width: 100%;
+ background: #fff;
+ &:empty {
+ padding: 0;
+ }
+ }
+ section {
+ display: inline-block;
+ margin-left: 16px;
+ margin-bottom: 18px;
+ }
+}
+// 鍒楄〃鍜屽垎椤�
+.table-content {
+ padding: 0 16px;
+ .table-wrap {
+ padding: 16px 16px 60px 16px;
+ background: #fff;
+ // 宸ュ叿鏍�
+ .toolbar {
+ border-bottom: 1px solid #eee;
+ padding-bottom: 10px;
+ li {
+ display: inline-block;
+ margin-right: 6px;
+ }
+ }
+ // 琛ㄦ牸
+ .el-table {
+ //min-height: 300px;
+ overflow: auto;
+ th {
+ .cell {
+ color: #666;
+ }
+ }
+ // 澶嶉�夋鍒�
+ .el-table-column--selection {
+ .cell {
+ text-align: center !important;
+ }
+ }
+ // 澶氬�煎瓧娈�
+ .table-column-strings {
+ ul {
+ li {
+ display: inline-block;
+ background: #eee;
+ border-radius: 3px;
+ padding: 0 3px;
+ margin-right: 3px;
+ margin-bottom: 3px;
+ }
+ }
+ }
+ // 鏍戣瑙夎皟鏁�
+ [class*=el-table__row--level] .el-table__expand-icon {
+ position: relative;
+ left: -6px;
+ margin-right: 0;
+ }
+ }
+ // 鍒嗛〉
+ .table-pagination {
+ margin-left: 0px;
+ padding: 16px 0px;
+ text-align: left;
+ display: block;
+ z-index: 100;
+ width: -webkit-fill-available;
+ /* width: 80%; */
+ position: fixed;
+ bottom: 0px;
+ background-color: white;
+ margin-right: 50px;
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3