表格高度自适应
Showing
2 changed files
with
35 additions
and
4 deletions
... | @@ -11,7 +11,7 @@ | ... | @@ -11,7 +11,7 @@ |
11 | <span class="logo-text" v-show="!textLogo">不动产权籍调查系统</span> | 11 | <span class="logo-text" v-show="!textLogo">不动产权籍调查系统</span> |
12 | </div> | 12 | </div> |
13 | <div class="treeModule"> | 13 | <div class="treeModule"> |
14 | <LineTree :pd="pd"></LineTree> | 14 | <LineTree :pd="pd" @itemClick="itemClick"></LineTree> |
15 | </div> | 15 | </div> |
16 | </el-aside> | 16 | </el-aside> |
17 | <el-container> | 17 | <el-container> |
... | @@ -115,6 +115,7 @@ export default { | ... | @@ -115,6 +115,7 @@ export default { |
115 | label: "宗地代码1933", | 115 | label: "宗地代码1933", |
116 | children: [ | 116 | children: [ |
117 | { | 117 | { |
118 | id:'011', | ||
118 | label: "自然幢号1256", | 119 | label: "自然幢号1256", |
119 | }, | 120 | }, |
120 | ], | 121 | ], |
... | @@ -255,6 +256,10 @@ export default { | ... | @@ -255,6 +256,10 @@ export default { |
255 | // } | 256 | // } |
256 | screenfull.toggle(); | 257 | screenfull.toggle(); |
257 | }, | 258 | }, |
259 | //树控件点击事件 | ||
260 | itemClick(data){ | ||
261 | console.log(data); | ||
262 | } | ||
258 | }, | 263 | }, |
259 | }; | 264 | }; |
260 | </script> | 265 | </script> |
... | ... |
... | @@ -34,13 +34,14 @@ | ... | @@ -34,13 +34,14 @@ |
34 | </div> | 34 | </div> |
35 | </el-card> | 35 | </el-card> |
36 | </div> | 36 | </div> |
37 | <div class="notice"> | 37 | <div class="notice" ref="notice"> |
38 | <el-card> | 38 | <el-card> |
39 | <div slot="header" class="clearfix"> | 39 | <div slot="header" class="clearfix"> |
40 | <span>通知公告</span> | 40 | <span>通知公告</span> |
41 | </div> | 41 | </div> |
42 | <el-table | 42 | <el-table |
43 | :data="tableData" | 43 | :data="tableData" |
44 | :height="tableHeight" | ||
44 | style="width: 100%" | 45 | style="width: 100%" |
45 | :row-class-name="tableRowClassName" | 46 | :row-class-name="tableRowClassName" |
46 | > | 47 | > |
... | @@ -63,6 +64,10 @@ | ... | @@ -63,6 +64,10 @@ |
63 | </el-table> | 64 | </el-table> |
64 | </el-card> | 65 | </el-card> |
65 | </div> | 66 | </div> |
67 | <div class="pagination"> | ||
68 | <el-pagination background layout="prev, pager, next" :total="1000"> | ||
69 | </el-pagination> | ||
70 | </div> | ||
66 | </div> | 71 | </div> |
67 | </template> | 72 | </template> |
68 | 73 | ||
... | @@ -102,6 +107,10 @@ export default { | ... | @@ -102,6 +107,10 @@ export default { |
102 | title: "自然资源部四单位党组织开展联学联建活动", | 107 | title: "自然资源部四单位党组织开展联学联建活动", |
103 | }, | 108 | }, |
104 | { | 109 | { |
110 | date: "2016-05-04 08:23", | ||
111 | title: "珠江委部署珠江水利改革发展“十四五”规划思路报告编制工作", | ||
112 | }, | ||
113 | { | ||
105 | date: "2016-05-03 08:23", | 114 | date: "2016-05-03 08:23", |
106 | title: "全国海洋伏季休渔暨渤海综合治理专项执法行动启动", | 115 | title: "全国海洋伏季休渔暨渤海综合治理专项执法行动启动", |
107 | }, | 116 | }, |
... | @@ -114,9 +123,21 @@ export default { | ... | @@ -114,9 +123,21 @@ export default { |
114 | title: | 123 | title: |
115 | "生态环境部审议并原则通过《地级及以上城市国家地表水考核断面水环境质量排名方案》", | 124 | "生态环境部审议并原则通过《地级及以上城市国家地表水考核断面水环境质量排名方案》", |
116 | }, | 125 | }, |
126 | { | ||
127 | date: "2016-05-03 08:23", | ||
128 | title: "自然资源部四单位党组织开展联学联建活动", | ||
129 | }, | ||
130 | { | ||
131 | date: "2016-05-03 08:23", | ||
132 | title: "全国海洋伏季休渔暨渤海综合治理专项执法行动启动", | ||
133 | }, | ||
117 | ], | 134 | ], |
135 | tableHeight:'' | ||
118 | }; | 136 | }; |
119 | }, | 137 | }, |
138 | mounted(){ | ||
139 | this.tableHeight = this.$refs.notice.offsetHeight- 53; | ||
140 | }, | ||
120 | methods: { | 141 | methods: { |
121 | handleSelect() {}, | 142 | handleSelect() {}, |
122 | tableRowClassName({ row, rowIndex }) { | 143 | tableRowClassName({ row, rowIndex }) { |
... | @@ -133,6 +154,7 @@ export default { | ... | @@ -133,6 +154,7 @@ export default { |
133 | .main { | 154 | .main { |
134 | display: flex; | 155 | display: flex; |
135 | flex-direction: column; | 156 | flex-direction: column; |
157 | overflow: hidden; | ||
136 | height: 100%; | 158 | height: 100%; |
137 | .panel { | 159 | .panel { |
138 | @flex(); | 160 | @flex(); |
... | @@ -148,6 +170,7 @@ export default { | ... | @@ -148,6 +170,7 @@ export default { |
148 | .enter_box { | 170 | .enter_box { |
149 | @flex(); | 171 | @flex(); |
150 | div { | 172 | div { |
173 | cursor: pointer; | ||
151 | flex: 1; | 174 | flex: 1; |
152 | img { | 175 | img { |
153 | width: 68px; | 176 | width: 68px; |
... | @@ -167,8 +190,8 @@ export default { | ... | @@ -167,8 +190,8 @@ export default { |
167 | } | 190 | } |
168 | } | 191 | } |
169 | .notice { | 192 | .notice { |
170 | flex: 1; | 193 | flex: auto; |
171 | padding: 0 18px 26px 18px; | 194 | padding: 0 18px; |
172 | box-sizing: border-box; | 195 | box-sizing: border-box; |
173 | .el-table .even-row { | 196 | .el-table .even-row { |
174 | background: #f7f9fb; | 197 | background: #f7f9fb; |
... | @@ -183,5 +206,8 @@ export default { | ... | @@ -183,5 +206,8 @@ export default { |
183 | text-align: center; | 206 | text-align: center; |
184 | } | 207 | } |
185 | } | 208 | } |
209 | .pagination { | ||
210 | padding: 18px; | ||
211 | } | ||
186 | } | 212 | } |
187 | </style> | 213 | </style> |
... | ... |
-
Please register or sign in to post a comment