monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by wangtao
Commit 4560ff8bd3e75b3b47c07ab5452c6a66e648df1e 1 parent 2c4b7cc8

组件迁移

Inline Side-by-side
Showing 2 changed files with 105 additions and 114 deletions
1 -<div> 1 +<div >
2 <!-- 表格--> 2 <!-- 表格-->
3 - <el-table :border="showBorder" :data="dataList" :default-expand-all="defaultExpand" :expand-row-keys="expands"  
4 - :height="height" :row-key="getRowKeys" :size="size" @select="handleSelect"  
5 - @select-all="handleSelectAll"  
6 - @selection-change="handleSelectionChange" header-row-class-name="tbl-header-class" ref="multipleTable"  
7 - stripe  
8 - style="width: 100%;margin: 0px 0px; font-size:13.5px;" v-loading="loading" 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" :default-expand-all="defaultExpand"
  5 + @select="handleSelect" @select-all="handleSelectAll"
9 > 6 >
10 7
11 <el-table-column type="expand" v-if="showExpand"> 8 <el-table-column type="expand" v-if="showExpand">
12 <template #default="scope"> 9 <template #default="scope">
13 - <slot :scope="scope" name="expand"> 10 + <slot name="expand" :scope="scope" >
14 11
15 </slot> 12 </slot>
16 </template> 13 </template>
17 </el-table-column> 14 </el-table-column>
18 - <el-table-column align="center" type="selection" v-if="showSelection && columns.length > 0" width="55"/>  
19 - <el-table-column :label="indexLabel" align="center" type="index" v-if="showIndex && columns.length > 0"  
20 - 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" width="80"/>
21 17
22 - <el-table-column :align="item.align == undefined ? 'center' : item.align " :label="item.label" :prop="item.prop"  
23 - :sortable="item.sortable == undefined ? false : item.sortable"  
24 - :width="getWidth(item.width)"  
25 - v-for="item in columns">  
26 - <template v-if="!item.columns || item.columns.lendth==0" #default="scope">  
27 - <slot :column="item" :prop="item.prop" :row="scope.row"> 18 + <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 + :width="getWidth(item.width)">
  20 + <template #default="scope">
  21 + <slot :row="scope.row" :prop="item.prop" :column="item">
28 <div v-if="typeof(item.click) == 'function' && typeof(item.render) == 'function'"> 22 <div v-if="typeof(item.click) == 'function' && typeof(item.render) == 'function'">
29 - <span @click="item.click(scope.row)" style="cursor: pointer"  
30 - v-html="item.render(scope.row)"></span> 23 + <span style="cursor: pointer" @click="item.click(scope.row)" v-html="item.render(scope.row)"></span>
31 </div> 24 </div>
32 - <div v-else-if="typeof(item.click) == 'function'">  
33 - <span @click="item.click(scope.row)" style="cursor: pointer"> {{scope.row[item.prop]}}</span> 25 + <div v-else-if="typeof(item.click) == 'function'" >
  26 + <span style="cursor: pointer" @click="item.click(scope.row)"> {{scope.row[item.prop]}}</span>
34 </div> 27 </div>
35 - <div v-else-if="typeof(item.render) == 'function'"> 28 + <div v-else-if="typeof(item.render) == 'function'" >
36 <span v-html="item.render(scope.row)">{{scope.row[item.prop]}}</span> 29 <span v-html="item.render(scope.row)">{{scope.row[item.prop]}}</span>
37 </div> 30 </div>
38 31
39 <span v-else> 32 <span v-else>
40 - <el-tooltip placement="top">  
41 - <template #content> 33 + <el-tooltip placement="top-start" :disabled="scope.row.isShowTooltip == undefined || scope.row.isShowTooltip == false">
  34 + <template #content >
42 <div v-html="getTextContent(scope.row[item.prop])"> 35 <div v-html="getTextContent(scope.row[item.prop])">
43 </div> 36 </div>
44 </template> 37 </template>
45 - <div style="overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;"> 38 + <div class="text-overflow-line2" @mouseenter="tableColMouseenter($event,scope.row)">
46 {{scope.row[item.prop]}} 39 {{scope.row[item.prop]}}
47 </div> 40 </div>
48 </el-tooltip> 41 </el-tooltip>
49 </span> 42 </span>
50 </slot> 43 </slot>
51 </template> 44 </template>
52 - <el-table-column v-else :align="columnItem.align == undefined ? 'center' : columnItem.align " :label="columnItem.label" :prop="columnItem.prop"  
53 - :sortable="columnItem.sortable == undefined ? false : columnItem.sortable"  
54 - :width="getWidth(columnItem.width)"  
55 - v-for="columnItem in item.columns">  
56 - <template #default="scope">  
57 - <slot :column="columnItem" :prop="columnItem.prop" :row="scope.row">  
58 - <div v-if="typeof(columnItem.click) == 'function' && typeof(columnItem.render) == 'function'">  
59 - <span @click="columnItem.click(scope.row)" style="cursor: pointer"  
60 - v-html="columnItem.render(scope.row)"></span>  
61 - </div>  
62 - <div v-else-if="typeof(columnItem.click) == 'function'">  
63 - <span @click="columnItem.click(scope.row)" style="cursor: pointer"> {{scope.row[columnItem.prop]}}</span>  
64 - </div>  
65 - <div v-else-if="typeof(columnItem.render) == 'function'">  
66 - <span v-html="columnItem.render(scope.row)">{{scope.row[columnItem.prop]}}</span>  
67 - </div>  
68 -  
69 - <span v-else>  
70 - <el-tooltip placement="top">  
71 - <template #content>  
72 - <div v-html="getTextContent(scope.row[columnItem.prop])">  
73 - </div>  
74 - </template>  
75 - <div style="overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">  
76 - {{scope.row[columnItem.prop]}}  
77 - </div>  
78 - </el-tooltip>  
79 - </span>  
80 - </slot>  
81 - </template>  
82 - </el-table-column>  
83 </el-table-column> 45 </el-table-column>
84 46
85 - <el-table-column align="center" label="操作" v-if="showTools && columns.length > 0" width="80"> 47 + <el-table-column v-if="showTools && columns.length > 0" fixed="right" label="操作" :width="toolsWith" align="center">
86 <template #default="scope"> 48 <template #default="scope">
87 - <slot :scope="scope" name="tools"></slot> 49 + <slot name="tools" :scope="scope" ></slot>
88 </template> 50 </template>
89 </el-table-column> 51 </el-table-column>
90 </el-table> 52 </el-table>
91 <!-- 分页 --> 53 <!-- 分页 -->
92 <div style='text-align: left;background-color: white' v-if="showPage"> 54 <div style='text-align: left;background-color: white' v-if="showPage">
93 <el-pagination 55 <el-pagination
  56 + @size-change="handleSizeChange"
  57 + @prev-click="prePage"
  58 + @next-click="nextPage"
  59 + @current-change="handleCurrentChange"
94 :current-page="currentPage" 60 :current-page="currentPage"
95 - :layout="layout"  
96 - :page-size="pageSize"  
97 :page-sizes="pageSizes" 61 :page-sizes="pageSizes"
98 - :total="total"  
99 - @current-change="handleCurrentChange"  
100 - @next-click="nextPage"  
101 - @prev-click="prePage"  
102 - @size-change="handleSizeChange"> 62 + :page-size="pageSize"
  63 + :layout="layout"
  64 + :total="total">
103 </el-pagination> 65 </el-pagination>
104 </div> 66 </div>
105 </div> 67 </div>
@@ -36,7 +36,7 @@ export default { @@ -36,7 +36,7 @@ export default {
36 // 分页页码设置 36 // 分页页码设置
37 pageSizes: { 37 pageSizes: {
38 type: Array, 38 type: Array,
39 - default: [10, 50, 100, 200, 300, 400] 39 + default: [10,50,100, 200, 300, 400]
40 }, 40 },
41 // 默认展示 41 // 默认展示
42 pageSize: { 42 pageSize: {
@@ -67,46 +67,50 @@ export default { @@ -67,46 +67,50 @@ export default {
67 default: [] 67 default: []
68 }, 68 },
69 // 是否展示加载 69 // 是否展示加载
70 - loading: { 70 + loading:{
71 type: Boolean, 71 type: Boolean,
72 default: false 72 default: false
73 }, 73 },
74 - maxWidth: { 74 + maxWidth:{
75 type: Number, 75 type: Number,
76 default: window.innerWidth 76 default: window.innerWidth
77 }, 77 },
78 - showTools: { 78 + showTools:{
79 type: Boolean, 79 type: Boolean,
80 default: false 80 default: false
81 }, 81 },
  82 + toolsWith:{
  83 + type: Number,
  84 + default: 80
  85 + },
82 // medium / small / mini 86 // medium / small / mini
83 - size: { 87 + size:{
84 type: String, 88 type: String,
85 default: 'small' 89 default: 'small'
86 }, 90 },
87 - multipleSelection: {  
88 - type: Array,  
89 - default: [] 91 + multipleSelection:{
  92 + type:Array,
  93 + default:[]
90 }, 94 },
91 //展开行 95 //展开行
92 - showExpand: { 96 + showExpand:{
93 type: Boolean, 97 type: Boolean,
94 default: false 98 default: false
95 }, 99 },
96 //行数据的key 100 //行数据的key
97 - getRowKeys: { 101 + getRowKeys:{
98 type: String, 102 type: String,
99 default: 'id' 103 default: 'id'
100 }, 104 },
101 //默认展开哪行 105 //默认展开哪行
102 - expands: { 106 + expands:{
103 type: Array, 107 type: Array,
104 default: [] 108 default: []
105 }, 109 },
106 //是否默认展开所有行 110 //是否默认展开所有行
107 - defaultExpand: {  
108 - type: Boolean,  
109 - default: false 111 + defaultExpand:{
  112 + type:Boolean,
  113 + default:false
110 } 114 }
111 }, 115 },
112 data() { 116 data() {
@@ -125,22 +129,22 @@ export default { @@ -125,22 +129,22 @@ export default {
125 * 时间：2021/11/16 16:19 129 * 时间：2021/11/16 16:19
126 */ 130 */
127 131
128 - let getWidth = (width) => {  
129 - let maxWidth = (function () { 132 + let getWidth = (width) =>{
  133 + let maxWidth = (function (){
130 let cols = props.columns; 134 let cols = props.columns;
131 - if (cols && cols.length > 0) { 135 + if(cols && cols.length > 0){
132 // 求和 136 // 求和
133 let w = 0; 137 let w = 0;
134 cols.forEach(function (v) { 138 cols.forEach(function (v) {
135 - w += parseFloat(v.width); 139 + w += parseFloat(v.width) ;
136 }) 140 })
137 141
138 let max = props.maxWidth; 142 let max = props.maxWidth;
139 - if (props.showTools) { 143 + if(props.showTools){
140 max -= 80; 144 max -= 80;
141 } 145 }
142 146
143 - if (w < max) { 147 + if(w < max){
144 return max / w * width; 148 return max / w * width;
145 } 149 }
146 } 150 }
@@ -151,7 +155,7 @@ export default { @@ -151,7 +155,7 @@ export default {
151 } 155 }
152 156
153 157
154 - let callback = () => { 158 + let callback = () =>{
155 let params = { 159 let params = {
156 page: currentPage.value, limit: pageSize.value 160 page: currentPage.value, limit: pageSize.value
157 } 161 }
@@ -183,7 +187,7 @@ export default { @@ -183,7 +187,7 @@ export default {
183 let prePage = (val) => { 187 let prePage = (val) => {
184 // console.log(`当前页: ${val}`) 188 // console.log(`当前页: ${val}`)
185 // props.currentPage = val - 1; 189 // props.currentPage = val - 1;
186 - currentPage.value = val - 1; 190 + currentPage.value = val-1;
187 callback(); 191 callback();
188 } 192 }
189 193
@@ -191,7 +195,7 @@ export default { @@ -191,7 +195,7 @@ export default {
191 let nextPage = (val) => { 195 let nextPage = (val) => {
192 // console.log(`当前页: ${val}`) 196 // console.log(`当前页: ${val}`)
193 // props.currentPage = val + 1; 197 // props.currentPage = val + 1;
194 - currentPage.value = val + 1; 198 + currentPage.value = val+1;
195 callback(); 199 callback();
196 } 200 }
197 201
@@ -201,13 +205,13 @@ export default { @@ -201,13 +205,13 @@ export default {
201 // }); 205 // });
202 206
203 //全选事件 207 //全选事件
204 - let handleSelectionChange = (val) => { 208 + let handleSelectionChange=(val)=>{
205 // multipleSelection.value = val 209 // multipleSelection.value = val
206 emit('selectionChange', val) 210 emit('selectionChange', val)
207 211
208 } 212 }
209 //设置默认选中 213 //设置默认选中
210 - let toggleSelection = (rows) => { 214 + let toggleSelection=(rows)=> {
211 //console.log("rows",rows) 215 //console.log("rows",rows)
212 proxy.$nextTick(function () { 216 proxy.$nextTick(function () {
213 //console.log("set",props.dataList,props.multipleSelection) 217 //console.log("set",props.dataList,props.multipleSelection)
@@ -223,18 +227,18 @@ export default { @@ -223,18 +227,18 @@ export default {
223 }) 227 })
224 } 228 }
225 229
226 - let getTextContent = (val) => {  
227 - if (val && val != '' && val != null) {  
228 - val = val + ''.replace(/[^\x00-\xff]/g, "$&\x01").replace(/.{50}\x01?/g, "$&<br/>").replace(/\x01/g, ""); 230 + let getTextContent = (val) =>{
  231 + if(val && val != '' && val != null){
  232 + val = val+''.replace(/[^\x00-\xff]/g,"$&\x01").replace(/.{50}\x01?/g,"$&<br/>").replace(/\x01/g,"");
229 } 233 }
230 - return val; 234 + return `<pre>${val}</pre>`;
231 235
232 } 236 }
233 //设置父节点选中后children也选中 237 //设置父节点选中后children也选中
234 - let setChecked = (row) => {  
235 - let arr = [];  
236 - if (row.children) {  
237 - row.children.map(j => { 238 + let setChecked=(row)=>{
  239 + let arr=[];
  240 + if(row.children){
  241 + row.children.map(j=>{
238 arr.push(j) 242 arr.push(j)
239 setChecked(j) 243 setChecked(j)
240 }) 244 })
@@ -242,43 +246,67 @@ export default { @@ -242,43 +246,67 @@ export default {
242 toggleSelection(arr) 246 toggleSelection(arr)
243 } 247 }
244 //勾选数据行的Checkbox事件 248 //勾选数据行的Checkbox事件
245 - let handleSelect = (selection, row) => { 249 + let handleSelect=(selection, row)=>{
  250 + /* if(selection.some(el=>{ return row[props.getRowKeys] ===el[props.getRowKeys]})){
  251 + setChecked(row);
  252 + }else{
  253 + setChecked(row);
  254 + }*/
246 setChecked(row); 255 setChecked(row);
247 256
248 - emit('handleSelect', selection) 257 + emit('handleSelect',selection)
249 } 258 }
250 //勾选全选checkbox事件 259 //勾选全选checkbox事件
251 - let handleSelectAll = (selection) => {  
252 - const isSelect = selection.some(el => {  
253 - const tableDataIds = props.dataList.map(j => j[props.getRowKeys]) 260 + let handleSelectAll=(selection)=>{
  261 + const isSelect=selection.some(el=>{
  262 + const tableDataIds=props.dataList.map(j=>j[props.getRowKeys])
254 return tableDataIds.includes(el.id) 263 return tableDataIds.includes(el.id)
255 }) 264 })
256 - const isCancel = !props.dataList.every(el => {  
257 - const selectIds = selection.map(j => j[props.getRowKeys]) 265 + const isCancel=!props.dataList.every(el=>{
  266 + const selectIds=selection.map(j=>j[props.getRowKeys])
258 return selectIds.includes(el.id) 267 return selectIds.includes(el.id)
259 }) 268 })
260 - if (isSelect) { 269 + if(isSelect){
261 setChecked(selection); 270 setChecked(selection);
262 } 271 }
263 - if (isCancel) {  
264 - props.dataList.map(el => { 272 + if(isCancel){
  273 + props.dataList.map(el=>{
265 setChecked(el); 274 setChecked(el);
266 }) 275 })
267 } 276 }
268 277
269 - emit('handleSelectAll', selection) 278 + emit('handleSelectAll',selection)
270 } 279 }
  280 +
  281 + /**
  282 + * 表格组件，超过2行展示tooltip
  283 + * @param e
  284 + * @param item
  285 + */
  286 + const tableColMouseenter = (e, item) => {
  287 + const ev = e.target;
  288 + var height = $(ev).scroll().height()
  289 + // 超过2行 46
  290 + if (height > 45) {
  291 + // 实际高度 > 可视高度 文字溢出
  292 + item.isShowTooltip = true;
  293 + } else {
  294 + // 否则为不溢出
  295 + item.isShowTooltip = false;
  296 + }
  297 + }
  298 +
271 // 挂载完 299 // 挂载完
272 Vue.onMounted(() => { 300 Vue.onMounted(() => {
273 //callback(); 301 //callback();
274 302
275 }) 303 })
276 - Vue.watch(() => props.dataList, (newValue, oldValue) => {  
277 - setTimeout(function () {  
278 - if (props.showSelection) { 304 + Vue.watch(()=>props.dataList,(newValue, oldValue)=>{
  305 + setTimeout(function (){
  306 + if(props.showSelection){
279 toggleSelection(props.multipleSelection) 307 toggleSelection(props.multipleSelection)
280 } 308 }
281 - }, 100) 309 + },100)
282 310
283 311
284 }) 312 })
@@ -296,7 +324,8 @@ export default { @@ -296,7 +324,8 @@ export default {
296 prePage, 324 prePage,
297 nextPage, 325 nextPage,
298 getWidth, 326 getWidth,
299 - getTextContent 327 + getTextContent,
  328 + tableColMouseenter
300 } 329 }
301 } 330 }
302 } 331 }