Showing
3 changed files
with
64 additions
and
21 deletions
@@ -69,9 +69,13 @@ | @@ -69,9 +69,13 @@ | ||
69 | } | 69 | } |
70 | 70 | ||
71 | .container .cm-card .search-table { | 71 | .container .cm-card .search-table { |
72 | - padding: 0px 6px; | ||
73 | -} | 72 | + padding: 0px 3px; |
74 | 73 | ||
74 | +} | ||
75 | +.el-table__body, .el-table__footer, .el-table__header{ | ||
76 | + width: auto; | ||
77 | + max-width: calc(100% - 10px); | ||
78 | +} | ||
75 | /* | 79 | /* |
76 | 共通弹框配置样式 | 80 | 共通弹框配置样式 |
77 | custom-class="config-dialog" | 81 | custom-class="config-dialog" |
@@ -130,7 +134,6 @@ custom-class="config-dialog" | @@ -130,7 +134,6 @@ custom-class="config-dialog" | ||
130 | background: #ffffff; | 134 | background: #ffffff; |
131 | padding: 20px 5px 0; | 135 | padding: 20px 5px 0; |
132 | } | 136 | } |
133 | - | ||
134 | .breadcrumb .el-breadcrumb .el-breadcrumb__item { | 137 | .breadcrumb .el-breadcrumb .el-breadcrumb__item { |
135 | cursor: pointer; | 138 | cursor: pointer; |
136 | } | 139 | } |
1 | -<div > | 1 | +<div style="width:auto;height: 100%"> |
2 | <!-- 表格--> | 2 | <!-- 表格--> |
3 | - <el-table :border="showBorder" v-loading="loading" :size="size" ref="multipleTable" @selection-change="handleSelectionChange" :data="dataList" stripe header-row-class-name="tbl-header-class" :height="height" | ||
4 | - style="width: 100%;margin: 0px 0px; font-size:13.5px;" :row-key="getRowKeys" :expand-row-keys="expands"> | 3 | + <el-table class="table-style-custom" :border="showBorder" v-loading="loading" :size="size" ref="multipleTable" |
4 | + @selection-change="handleSelectionChange" :data="dataList" | ||
5 | + :height="height" | ||
6 | + :row-key="getRowKeys" :expand-row-keys="expands"> | ||
5 | 7 | ||
6 | <el-table-column type="expand" v-if="showExpand"> | 8 | <el-table-column type="expand" v-if="showExpand"> |
7 | <template #default="scope"> | 9 | <template #default="scope"> |
8 | - <slot name="expand" :scope="scope" > | 10 | + <slot name="expand" :scope="scope"> |
9 | 11 | ||
10 | </slot> | 12 | </slot> |
11 | </template> | 13 | </template> |
12 | </el-table-column> | 14 | </el-table-column> |
13 | - <el-table-column v-if="showSelection && columns.length > 0" align="center" type="selection" width="55" /> | ||
14 | - <el-table-column v-if="showIndex && columns.length > 0" type="index" :label="indexLabel" align="center" width="50"/> | 15 | + <el-table-column v-if="showSelection && columns.length > 0" align="center" type="selection" width="55"/> |
16 | + <el-table-column v-if="showIndex && columns.length > 0" type="index" :label="indexLabel" align="center" | ||
17 | + width="50"/> | ||
15 | 18 | ||
16 | - <el-table-column v-for="item in columns" :prop="item.prop" :label="item.label" :sortable="item.sortable == undefined ? false : item.sortable" :align="item.align == undefined ? 'center' : item.align " | 19 | + <el-table-column v-for="item in columns" :prop="item.prop" :label="item.label" |
20 | + :sortable="item.sortable == undefined ? false : item.sortable" | ||
21 | + :align="item.align == undefined ? 'center' : item.align " | ||
17 | :width="getWidth(item.width)"> | 22 | :width="getWidth(item.width)"> |
18 | <template #default="scope"> | 23 | <template #default="scope"> |
19 | <slot :row="scope.row" :prop="item.prop" :column="item"> | 24 | <slot :row="scope.row" :prop="item.prop" :column="item"> |
20 | - <div v-if="typeof(item.click) == 'function' && typeof(item.render) == 'function'"> | ||
21 | - <span style="cursor: pointer" @click="item.click(scope.row)" v-html="item.render(scope.row)"></span> | 25 | + <div v-if="typeof(item.click) == 'function' && typeof(item.render) == 'function'"> |
26 | + <span style="cursor: pointer" @click="item.click(scope.row)" | ||
27 | + v-html="item.render(scope.row)"></span> | ||
22 | </div> | 28 | </div> |
23 | - <div v-else-if="typeof(item.click) == 'function'" > | 29 | + <div v-else-if="typeof(item.click) == 'function'"> |
24 | <span style="cursor: pointer" @click="item.click(scope.row)"> {{scope.row[item.prop]}}</span> | 30 | <span style="cursor: pointer" @click="item.click(scope.row)"> {{scope.row[item.prop]}}</span> |
25 | </div> | 31 | </div> |
26 | - <div v-else-if="typeof(item.render) == 'function'" > | 32 | + <div v-else-if="typeof(item.render) == 'function'"> |
27 | <span v-html="item.render(scope.row)">{{scope.row[item.prop]}}</span> | 33 | <span v-html="item.render(scope.row)">{{scope.row[item.prop]}}</span> |
28 | </div> | 34 | </div> |
29 | 35 | ||
@@ -42,9 +48,9 @@ | @@ -42,9 +48,9 @@ | ||
42 | </template> | 48 | </template> |
43 | </el-table-column> | 49 | </el-table-column> |
44 | 50 | ||
45 | - <el-table-column v-if="showTools && columns.length > 0" label="操作" width="80" align="center"> | 51 | + <el-table-column v-if="showTools && columns.length > 0" label="操作" width="80" align="center"> |
46 | <template #default="scope"> | 52 | <template #default="scope"> |
47 | - <slot name="tools" :scope="scope" ></slot> | 53 | + <slot name="tools" :scope="scope"></slot> |
48 | </template> | 54 | </template> |
49 | </el-table-column> | 55 | </el-table-column> |
50 | </el-table> | 56 | </el-table> |
@@ -63,4 +69,39 @@ | @@ -63,4 +69,39 @@ | ||
63 | </el-pagination> | 69 | </el-pagination> |
64 | </div> | 70 | </div> |
65 | </div> | 71 | </div> |
72 | +<style lang="scss" scoped> | ||
73 | + .table-style-custom { | ||
74 | + width: calc(100% - 10px); | ||
75 | + max-width: calc(100% - 10px); | ||
76 | + margin: 5px auto; | ||
77 | + border: 1px solid #4d5457; /* 表格整体的边框样式 */ | ||
78 | + border-top: 1px solid #4d5457; | ||
79 | + border-left: 1px solid #4d5457; | ||
80 | + //background-color: #131720; | ||
81 | + } | ||
66 | 82 | ||
83 | + .table-style-custom .el-table__body-wrapper .el-table__body,.table-style-custom .el-table__header-wrapper .el-table__header{ | ||
84 | + width: auto; | ||
85 | + max-width: calc(100% - 10px); | ||
86 | + } | ||
87 | + .table-style-custom .el-table__header tr, .el-table__header th { | ||
88 | + height: 40px; | ||
89 | + padding: 0; | ||
90 | + color: #ccd3cc; | ||
91 | + background-color: #131720; | ||
92 | + } | ||
93 | + | ||
94 | + .table-style-custom .el-table__body tr, .el-table__body td { | ||
95 | + padding: 0; | ||
96 | + height: 40px; | ||
97 | + color: #ccd3cc; | ||
98 | + background-color: #2e313d; | ||
99 | + } | ||
100 | + | ||
101 | + .table-style-custom .el-table__body tr.current-row > td, | ||
102 | + .table-style-custom .el-table__body tr:hover > td { | ||
103 | + color: #07f; | ||
104 | + cursor: pointer; | ||
105 | + background-color: #363c53 !important; | ||
106 | + } | ||
107 | +</style> |
@@ -21,7 +21,7 @@ | @@ -21,7 +21,7 @@ | ||
21 | <el-button @click="addAj()" style="margin-left: 10px">新增</el-button> | 21 | <el-button @click="addAj()" style="margin-left: 10px">新增</el-button> |
22 | </el-form-item> | 22 | </el-form-item> |
23 | </div> | 23 | </div> |
24 | - <div class="design" style="float:right;padding-left: 1200px"> | 24 | + <div class="design" style="float:right;"> |
25 | <el-form-item> | 25 | <el-form-item> |
26 | <el-button type="primary" @click="handleView()" style="margin-left: 10px">设计</el-button> | 26 | <el-button type="primary" @click="handleView()" style="margin-left: 10px">设计</el-button> |
27 | </el-form-item> | 27 | </el-form-item> |
@@ -32,7 +32,7 @@ | @@ -32,7 +32,7 @@ | ||
32 | <cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList" | 32 | <cm-table-page :columns="columns" :dataList="tableDataList" @loaddata="loadTableDataList" |
33 | :showIndex="true" :total="count" :showSelection="true" | 33 | :showIndex="true" :total="count" :showSelection="true" |
34 | :showBorder="true" :loading="false" :pageSize="pageSize" | 34 | :showBorder="true" :loading="false" :pageSize="pageSize" |
35 | - :showPage="true" :showTools="true" :height="(height - 130)" > | 35 | + :showPage="true" :showTools="true" :height="(height - 130)" style="width:calc(100% - 10px);"> |
36 | <template #default="{row,prop,column}"> | 36 | <template #default="{row,prop,column}"> |
37 | <div v-if="prop == 'type'"> | 37 | <div v-if="prop == 'type'"> |
38 | <div v-if="row.type == 0"> | 38 | <div v-if="row.type == 0"> |
@@ -88,7 +88,6 @@ | @@ -88,7 +88,6 @@ | ||
88 | <el-radio v-model="ajConfigFrom.type" label="1" size="large">按钮</el-radio> | 88 | <el-radio v-model="ajConfigFrom.type" label="1" size="large">按钮</el-radio> |
89 | <el-radio v-model="ajConfigFrom.type" label="2" size="large">详情页</el-radio> | 89 | <el-radio v-model="ajConfigFrom.type" label="2" size="large">详情页</el-radio> |
90 | </div> | 90 | </div> |
91 | - <!-- <div style="height: 15px; color: darkgrey">说明:参数中间用'&'拼接</div>--> | ||
92 | </el-form-item> | 91 | </el-form-item> |
93 | 92 | ||
94 | 93 | ||
@@ -98,7 +97,7 @@ | @@ -98,7 +97,7 @@ | ||
98 | allow-create | 97 | allow-create |
99 | default-first-option | 98 | default-first-option |
100 | :reserve-keyword="false" | 99 | :reserve-keyword="false" |
101 | - placeholder="请选择" style="width: 555px;"> | 100 | + placeholder="请选择" style="width: calc(100% - 10px);"> |
102 | <el-option | 101 | <el-option |
103 | v-for="item in menuOptions" | 102 | v-for="item in menuOptions" |
104 | :key="item.value" | 103 | :key="item.value" |
@@ -123,7 +122,7 @@ | @@ -123,7 +122,7 @@ | ||
123 | allow-create | 122 | allow-create |
124 | default-first-option | 123 | default-first-option |
125 | :reserve-keyword="false" | 124 | :reserve-keyword="false" |
126 | - placeholder="请选择" style="width: 510px;"> | 125 | + placeholder="请选择" style="width: calc(100% - 10px);"> |
127 | <el-option | 126 | <el-option |
128 | v-for="item in options" | 127 | v-for="item in options" |
129 | :key="item.value" | 128 | :key="item.value" |
-
Please register or login to post a comment