|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <div class="table-layout"> | 
|---|
|  |  |  | <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"> | 
|---|
|  |  |  | <div class="table-search-form" ref="tableSearchForm"> | 
|---|
|  |  |  | <div class="form-wrap"> | 
|---|
|  |  |  | <slot name="search-form"></slot> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | 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: 100%; | 
|---|
|  |  |  | height: calc(100%-10px); | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-direction: column; | 
|---|
|  |  |  | margin-top: 10px; | 
|---|
|  |  |  | .not-allow-wrap { | 
|---|
|  |  |  | padding-top: 0; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .danger-column{ | 
|---|
|  |  |  | color: red; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | // 头部 | 
|---|
|  |  |  | .table-header { | 
|---|
|  |  |  | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-wrap: wrap; | 
|---|
|  |  |  | padding: 0 16px; | 
|---|
|  |  |  | margin-bottom: 10px; | 
|---|
|  |  |  | .form-wrap { | 
|---|
|  |  |  | padding: 16px 16px 0 16px; | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | // 列表和分页 | 
|---|
|  |  |  | .table-content { | 
|---|
|  |  |  | margin-top: 10px; | 
|---|
|  |  |  | padding: 0 16px; | 
|---|
|  |  |  | .table-wrap { | 
|---|
|  |  |  | padding: 16px 16px 0 16px; | 
|---|
|  |  |  | padding: 16px 16px 60px 16px; | 
|---|
|  |  |  | background: #fff; | 
|---|
|  |  |  | // 工具栏 | 
|---|
|  |  |  | .toolbar { | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | // 表格 | 
|---|
|  |  |  | .el-table { | 
|---|
|  |  |  | //min-height: 300px; | 
|---|
|  |  |  | overflow: auto; | 
|---|
|  |  |  | th { | 
|---|
|  |  |  | .cell { | 
|---|
|  |  |  | color: #666; | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | // 分页 | 
|---|
|  |  |  | .table-pagination { | 
|---|
|  |  |  | padding: 16px 0; | 
|---|
|  |  |  | 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; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|