style:table组件的完善
Showing
6 changed files
with
34 additions
and
8 deletions
... | @@ -83,7 +83,11 @@ | ... | @@ -83,7 +83,11 @@ |
83 | display: block | 83 | display: block |
84 | } | 84 | } |
85 | } | 85 | } |
86 | .el-input__prefix {display: none;} | 86 | |
87 | .el-input__prefix { | ||
88 | display: none; | ||
89 | } | ||
90 | |||
87 | // fix date-picker ui bug in filter-item | 91 | // fix date-picker ui bug in filter-item |
88 | .el-range-editor.el-input__inner { | 92 | .el-range-editor.el-input__inner { |
89 | display: inline-flex !important; | 93 | display: inline-flex !important; |
... | @@ -185,6 +189,18 @@ | ... | @@ -185,6 +189,18 @@ |
185 | color: #4A4A4A; | 189 | color: #4A4A4A; |
186 | } | 190 | } |
187 | 191 | ||
192 | // table换行 | ||
193 | .el-tooltip__popper { | ||
194 | max-width: 80%; | ||
195 | } | ||
196 | |||
197 | .el-table .el-tooltip span { | ||
198 | white-space: pre-wrap !important; | ||
199 | display: -webkit-box; | ||
200 | -webkit-line-clamp: 2; | ||
201 | -webkit-box-orient: vertical; | ||
202 | overflow: hidden; | ||
203 | } | ||
188 | 204 | ||
189 | .el-table tr:nth-child(even) { | 205 | .el-table tr:nth-child(even) { |
190 | background: #FCFDFD !important; | 206 | background: #FCFDFD !important; | ... | ... |
... | @@ -363,7 +363,7 @@ aside { | ... | @@ -363,7 +363,7 @@ aside { |
363 | overflow: hidden; | 363 | overflow: hidden; |
364 | text-overflow: ellipsis; | 364 | text-overflow: ellipsis; |
365 | overflow-wrap: break-word; | 365 | overflow-wrap: break-word; |
366 | -webkit-line-clamp: 3; | 366 | -webkit-line-clamp: 2; |
367 | -webkit-box-orient: vertical; | 367 | -webkit-box-orient: vertical; |
368 | } | 368 | } |
369 | 369 | ... | ... |
1 | /* | 1 | /* |
2 | * @Description: | 2 | * @Description: |
3 | * @Autor: renchao | 3 | * @Autor: renchao |
4 | * @LastEditTime: 2023-04-10 13:47:54 | 4 | * @LastEditTime: 2023-04-19 14:27:26 |
5 | */ | 5 | */ |
6 | import store from '@/store' | 6 | import store from '@/store' |
7 | // table 内部过滤器 由于过滤器只能在模板中使用 所以 就有了 jsx内部方法过滤器 | 7 | // table 内部过滤器 由于过滤器只能在模板中使用 所以 就有了 jsx内部方法过滤器 |
... | @@ -37,7 +37,10 @@ export default class filter { | ... | @@ -37,7 +37,10 @@ export default class filter { |
37 | return name | 37 | return name |
38 | } | 38 | } |
39 | } | 39 | } |
40 | getDictData (val) { | 40 | filterHtml (content) { |
41 | return content.replace(/<[^>]+>/g, ''); | ||
42 | } | ||
43 | getDictData (val) { | ||
41 | return store.getters.dictData[val] | 44 | return store.getters.dictData[val] |
42 | } | 45 | } |
43 | } | 46 | } |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -34,7 +34,9 @@ class data extends filter { | ... | @@ -34,7 +34,9 @@ class data extends filter { |
34 | label: "通知内容", | 34 | label: "通知内容", |
35 | minWidth: '170', | 35 | minWidth: '170', |
36 | render: (h, scope) => { | 36 | render: (h, scope) => { |
37 | return <div class="item-cwnr" domPropsInnerHTML={scope.row.noticeContent}></div> | 37 | return <el-tooltip effect="dark" content={this.filterHtml(scope.row.noticeContent)} placement="top"> |
38 | <div class="item-cwnr" domPropsInnerHTML={scope.row.noticeContent}></div> | ||
39 | </el-tooltip> | ||
38 | } | 40 | } |
39 | }, | 41 | }, |
40 | { | 42 | { | ... | ... |
... | @@ -23,10 +23,10 @@ class data extends filter { | ... | @@ -23,10 +23,10 @@ class data extends filter { |
23 | label: "流程状态", | 23 | label: "流程状态", |
24 | width: '80', | 24 | width: '80', |
25 | render: (h, scope) => { | 25 | render: (h, scope) => { |
26 | if(scope.row.cfgqzt == '1'){ | 26 | if (scope.row.cfgqzt == '1') { |
27 | return <div class='suspend'>查封挂起</div> | 27 | return <div class='suspend'>查封挂起</div> |
28 | } | 28 | } |
29 | if(scope.row.yygqzt == '1'){ | 29 | if (scope.row.yygqzt == '1') { |
30 | return <div class='suspend'>异议挂起</div> | 30 | return <div class='suspend'>异议挂起</div> |
31 | } | 31 | } |
32 | switch (scope.row.lczt) { | 32 | switch (scope.row.lczt) { |
... | @@ -62,6 +62,7 @@ class data extends filter { | ... | @@ -62,6 +62,7 @@ class data extends filter { |
62 | { | 62 | { |
63 | prop: "sqywmc", | 63 | prop: "sqywmc", |
64 | label: "申请业务名称", | 64 | label: "申请业务名称", |
65 | minWidth: '120', | ||
65 | }, | 66 | }, |
66 | { | 67 | { |
67 | label: "权利人", | 68 | label: "权利人", |
... | @@ -86,10 +87,13 @@ class data extends filter { | ... | @@ -86,10 +87,13 @@ class data extends filter { |
86 | { | 87 | { |
87 | prop: "zlStr", | 88 | prop: "zlStr", |
88 | label: "坐落", | 89 | label: "坐落", |
90 | minWidth: '150', | ||
91 | showOverflowTooltip: true | ||
89 | }, | 92 | }, |
90 | { | 93 | { |
91 | prop: "slsj", | 94 | prop: "slsj", |
92 | label: "受理时间", | 95 | label: "受理时间", |
96 | width: '140', | ||
93 | sortable: 'custom' | 97 | sortable: 'custom' |
94 | }, | 98 | }, |
95 | { | 99 | { | ... | ... |
... | @@ -46,6 +46,7 @@ class data extends filter { | ... | @@ -46,6 +46,7 @@ class data extends filter { |
46 | { | 46 | { |
47 | prop: "operationtime", | 47 | prop: "operationtime", |
48 | label: "领取时间", | 48 | label: "领取时间", |
49 | width: '140' | ||
49 | }, | 50 | }, |
50 | { | 51 | { |
51 | prop: "receiver", | 52 | prop: "receiver", |
... | @@ -65,7 +66,7 @@ class data extends filter { | ... | @@ -65,7 +66,7 @@ class data extends filter { |
65 | }, | 66 | }, |
66 | { | 67 | { |
67 | label: '操作', | 68 | label: '操作', |
68 | width: '180', | 69 | width: '130', |
69 | render: (h, scope) => { | 70 | render: (h, scope) => { |
70 | switch (scope.row.state) { | 71 | switch (scope.row.state) { |
71 | case '0': | 72 | case '0': | ... | ... |
-
Please register or sign in to post a comment