|
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'">
|
25
|
<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>
|
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
|
|
|
@@ -44,7 +50,7 @@ |
|
@@ -44,7 +50,7 @@ |
|
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> |
