功能：1.根據(jù)底部運行低、高。。。的顏色來展示表格數(shù)據(jù)在那個顏色
測試（http://10.0.16.47:8001/#/login）
? ? ? ? ? ?2.實現(xiàn)表頭拖拽? ? ? ? ? ? ? ??
<div?style="position:relative"?:style="{?height:?height?+?'px'?}">
????<el-table
??????v-loading="loading"
??????element-loading-text="拼命加載中"
??????element-loading-spinner="el-icon-loading"
??????element-loading-background="rgba(0,?0,?0,?0.8)"
??????:data="tableData"
??????stripe
??????border
??????:height="height"
??????class="drag_table"
??????@sort-change="handleSortChange"
??????@row-contextmenu="rowContextmenu"
??????@header-dragend="headerDragend"
??????@row-dblclick="handleRowDblClick"
????>
??????<column-tree?v-for="(item,index)?in?tableColumnsCopy"?:key="index"?:column-data="item"?:key-index="index"?:drag-state="dragState"?@spliceHead="spliceHead"?@spliceHeadRight="spliceHeadRight"?@cleanDragState="cleanDragState"?/>
????</el-table>
????<el-pagination
??????:current-page="currentPage"
??????:page-sizes="pageSizes"
??????:page-size="pageSize"
??????layout="total,?sizes,?prev,?pager,?next,?jumper"
??????:total="total"
??????@size-change="handleSizeChange"
??????@current-change="handleCurrentChange"
????/>
??</div>
script
import?ColumnTree?from?'./ColumnTree'
export?default?{
??name:?'DynamicTable',
??components:?{
????ColumnTree
??},
??props:?{
????tableColumns:?{
??????//?表頭
??????type:?Array,
??????default:?function()?{
????????return?[]
??????}
????},
????tableData:?{
??????//?表格數(shù)據(jù)
??????type:?Array,
??????default:?function()?{
????????return?[]
??????}
????},
????height:?{
??????//?表格高度
??????type:?Number,
??????default:?800
????},
????pageSizes:?{
??????//?每頁顯示個數(shù)選擇器的選項設置
??????type:?Array,
??????default:?function()?{
????????return?[20,?50,?100,?200]
??????}
????},
????pageSize:?{
??????//?每頁顯示條目個數(shù)，支持?.sync?修飾符
??????type:?Number,
??????default:?20
????},
????total:?{
??????//?總條數(shù)
??????type:?Number,
??????default:?0
????},
????showTableExtensions:?{
??????//?是否顯示表格擴展功能
??????type:?Boolean,
??????default:?false
????},
????loading:?{
??????//?顯示正在加載狀態(tài)
??????type:?Boolean,
??????default:?false
????}
??},
??data()?{
????return?{
??????data:?[],
??????pagination:?{
????????Page:?1,
????????PageSize:?this.pageSize,
????????SortName:?'',
????????SortType:?''
??????},
??????pageOrder:?'ascending',?//?排序
??????currentPage:?1,?//?當前頁
??????sortColumn:?'',?//?排序字段
??????tableColumnsCopy:?[],
??????key:?1,?//?table?key
??????dragState:?{
????????startIndex:?-1,?//?拖動起始元素的index
????????endIndex:?-1,?//?拖動結束元素的index
????????afterMoveIndex:?-1,?//?拖動后元素的index
????????dragging:?false,?//?是否正在拖動
????????direction:?null,?//?拖動方向
????????moveTableOutsideBack:?false?//?拖出到table外之后又拖回來
??????}
????}
??},
??computed:?{},
??watch:?{
????tableColumns:?{
??????handler:?function(val)?{
????????this.tableColumnsCopy?=?val
??????},
??????immediate:?true
????},
????tableData(val)?{
??????//?console.log(val)
??????//?const?idArr?=?[];
??????//?val.forEach(element?=>?{
??????//???for?(var?item?in?element)?{
??????//?????const?cell?=?element[item];
??????//?????if?(cell?&&?typeof?cell?===?"object")?{
??????//???????idArr.push(cell.RealValue);
??????//?????}
??????//???}
??????//?});
????}
??},
??created()?{},
??methods:?{
????objectSpanMethod({?row,?column,?rowIndex,?columnIndex?})?{
??????//?console.log(row,?column,?rowIndex,?columnIndex)
??????if?(columnIndex?<?2)?{
????????if?(rowIndex?%?2?===?0)?{
??????????return?{
????????????rowspan:?2,
????????????colspan:?1
??????????}
????????}?else?{
??????????return?{
????????????rowspan:?0,
????????????colspan:?0
??????????}
????????}
??????}
????},
????spliceHead(start,?end)?{
??????this.tableColumnsCopy.splice(end,?0,?this.tableColumnsCopy[start])
??????this.tableColumnsCopy.splice(start?+?1,?1)
????},
????spliceHeadRight(start,?end)?{
??????this.tableColumnsCopy.splice(end?+?1,?0,?this.tableColumnsCopy[start])
??????this.tableColumnsCopy.splice(start,?1)
????},
????cleanDragState()?{
??????//?再次初始化拖動狀態(tài)
??????this.dragState?=?{
????????startIndex:?-1,?//?拖到的起始index
????????endIndex:?-1,
????????afterMoveIndex:?-1,
????????dragging:?false,?//?是否拖到
????????direction:?null,?//?拖到方向
????????moveTableOutsideBack:?false
??????}
????},
????//?改變頁尺寸時觸發(fā)
????handleSizeChange(val)?{
??????this.pagination.PageSize?=?val
??????this.emitPagination()
????},
????//?改變當前頁時觸發(fā)
????handleCurrentChange(val)?{
??????//?this.pagination.Page?=?val
??????//?this.emitPagination()
??????this.$emit('handleCurrentChange',?val)
????},
????//?自定義排序
????handleSortChange(data)?{
??????this.pagination.SortName?=?data.prop
??????if?(data.column)?{
????????//?有排序
????????this.pagination.SortType?=?data.order?===?'ascending'???'asc'?:?'desc'
????????this.emitPagination()
??????}?else?{
????????//?無排序，使用默認排序
????????this.pagination.SortType?=?'asc'
????????this.pagination.SortName?=?''
????????this.emitPagination()
??????}
????},
????//?表格雙擊事件
????handleRowDblClick(row,?column,?event)?{
??????this.$emit('handleRowDblClick',?row,?column.property,?event)
????},
????//?數(shù)據(jù)刷新
????emitPagination()?{
??????//?父組件處理分頁，向其傳遞分頁參數(shù)
??????this.$emit('handlePageChange',?this.pagination)
????},
????rowContextmenu(row,?event,?MouseEvent)?{
??????//?父組件處理右鍵菜單，向其傳遞右鍵菜單參數(shù)
??????this.$emit('getContextMenu',?row,?event,?MouseEvent)
????},
????headerDragend(newWidth,?oldWidth,?column)?{
??????//?用戶改變表頭寬度時觸發(fā)
??????this.$emit('headerDragend',?{?width:?newWidth,?prop:?column.property?})
????}
??}
}
表頭組件columnTree
<el-table-column
????:label="columnData.name"
????:prop="columnData.columnName???columnData.columnName?:?''"
????:width="columnData.width"
????:column-key="keyIndex.toString()"
????:resizable="columnData.draggle"
????header-align="center"
????align="center"
????:render-header="renderHead"
??>
????<template?v-slot="{?row?}">
??????<div?v-if="row[columnData.columnName]?===?undefined">
????????<div
??????????v-for="(item,?index)?in?row.pointDetailList"
??????????v-show="item.columnName?===?columnData.columnName"
??????????:key="item.value?+?index"
??????????class="dd"
??????????:class="getDynamicCellClass(item)"
????????>
??????????{{?item.value?}}
????????</div>
??????</div>
??????<div?v-else>{{?row[columnData.columnName]?}}</div>
????</template>
??</el-table-column>
script中實現(xiàn)拖拽事件
export?default?{
??name:?'ColumnTree',
??//?draggle:?false
??props:?{
????columnData:?{
??????//?表頭
??????type:?Object,
??????default:?function()?{
????????return?null
??????}
????},
????keyIndex:?{
??????type:?Number,
??????default:?0
????},
????dragState:?{
??????type:?Object,
??????default:?()?=>?{}
????}
??},
??methods:?{
????renderHead(createElement,?{?column,?$index?})?{
??????//?這里可以根據(jù)$index的值來對自身需求進行修改，
??????return?createElement(
????????'span',
????????{
??????????class:?['thead-cell'],
??????????style:?{
????????????display:?'block',
????????????width:?'100%',
????????????cursor:?'move'
??????????},
??????????on:?{
????????????mousedown:?($event)?=>?{
??????????????this.handleMouseDown($event,?column)
????????????},
????????????mouseup:?($event)?=>?{
??????????????this.handleMouseUp($event,?column)
????????????},
????????????mousemove:?($event)?=>?{
??????????????this.handleMouseMove($event,?column)
????????????}
??????????}
????????},
????????[
??????????createElement('a',?column.label,?{
????????????class:?['labelColor']
??????????}),
??????????//?給每個表頭添加一個class=virtual?是畫虛線的類名。
??????????createElement('span',?{
????????????class:?['virtual']
??????????})
????????]
??????)
????},
????//?按下鼠標開始拖動
????handleMouseDown(e,?column)?{
??????//?判斷是鼠標左鍵
??????if?(e.button?===?0?&&?column.resizable)?{
????????this.dragState.dragging?=?true
????????this.dragState.startIndex?=?parseInt(column.columnKey)
????????//?console.log(`開始移動的位置?${this.dragState.startIndex}`)
????????//?給當前要拖動列的th設置class
????????document.querySelectorAll('.drag_table?table?thead?tr?th')[this.dragState.startIndex].className?+=?'?'?+?'dragging_column'
????????//?給拖動時的虛擬容器添加寬高
????????const?table?=?document.getElementsByClassName('drag_table')[0]
????????const?virtual?=?document.getElementsByClassName('virtual')
????????//?設置新插入的span.virtual的標簽?每一列的寬度、高度
????????for?(const?item?of?virtual)?{
??????????item.style.height?=?table.clientHeight?-?1?+?'px'
??????????item.style.width?=?item.parentElement.parentElement.clientWidth?+?'px'
????????}
????????this.dragState.moveTableOutsideBack?=?false
??????}
????},
????//?拖動中
????handleMouseMove(e,?column)?{
??????//?判斷是鼠標左鍵
??????if?(e.button?===?0?&&?column.resizable)?{
????????if?(this.dragState.dragging)?{
??????????const?currentIndex?=?parseInt(column.columnKey)?//?拖動的當前列index
??????????//?console.log(`移動到了${currentIndex}`)
??????????if?(currentIndex?-?this.dragState.startIndex?!==?0)?{
????????????this.dragState.direction?=
??????????????currentIndex?-?this.dragState.startIndex?<?0???'left'?:?'right'?//?判斷拖動方向
??????????}?else?{
????????????this.dragState.direction?=?null
??????????}
????????}?else?{
??????????return?false
????????}
??????}
????},
????//?鼠標放開結束拖動
????handleMouseUp(e,?column)?{
??????this.dragState.endIndex?=?parseInt(column.columnKey)?//?記錄結束列index
??????//?判斷是鼠標左鍵
??????if?(e.button?===?0?&&?column.resizable)?{
????????//?拖出當前table外之后又拖回來，不再進行易位操作（拖出去時已處理）
????????if?(this.dragState.moveTableOutsideBack)?{
??????????return?false
????????}?else?{
??????????//?console.log(`結束移動的位置?${this.dragState.endIndex}`)
??????????if?(this.dragState.startIndex?!==?this.dragState.endIndex)?{
????????????this.dragColumn(this.dragState)
??????????}
??????????this.dragColumn(this.dragState.startIndex,?this.dragState.endIndex,?this.dragState.direction)
??????????this.finishDragInit()
????????}
??????}
????},
????//?拖動易位
????dragColumn(startIndex,?endIndex,?direction)?{
??????//?console.log(`從${startIndex}移動到了${endIndex}`)
??????//?排除掉鼠標點擊table外面，然后拖入進table報錯
??????if?(startIndex?<?0)?{
????????return
??????}
??????//?判斷是向左移動還是向右移動
??????//?把移動的列插在某個列前面或者后面，然后在刪除移動的列
??????if?(direction?===?'left')?{
????????this.$emit('spliceHead',?startIndex,?endIndex)
??????}?else?{
????????this.$emit('spliceHeadRight',?startIndex,?endIndex)
??????}
????},
????//?拖動完成后的初始化
????finishDragInit()?{
??????//?給當前要拖動列的th取消class
??????for?(var?item?of?document.querySelectorAll('.drag_table?table?thead?tr?th'))?{
????????item.className?=?String(item.className).split('dragging_column').join('')
??????}
??????this.$emit('cleanDragState')
??????//?document.removeEventListener('mouseup',?this.handleMouseUp)
????},
????headerCellClassName({
??????column,
??????columnIndex
????})?{
??????return?columnIndex?===?this.dragState.afterMoveIndex???`drag_active_${this.dragState.direction}`?:?''
????},
????//?動態(tài)給表頭單元格th添加class，實現(xiàn)拖動中的背景
????cellClassName({
??????column,
??????columnIndex
????})?{
??????return?(columnIndex?===?this.dragState.startIndex???`dragging_column`?:?'')
????},
????getDynamicCellClass(cellData)?{
??????if?(cellData.columnName?!==?undefined)?{
????????const?realValue?=?parseFloat(cellData.value)
????????const?HiHi?=?cellData.accidentHigh?//?事故高
????????const?Hi?=?cellData.accidentLower?//?事故低
????????const?Lo?=?cellData.runningHigh?//?運行高
????????const?LoLo?=?cellData.runningLower?//?運行低
????????if?(realValue?<?Hi)?{
??????????return?{?LoLo:?true?}
????????}?else?if?(realValue?>?Hi?&&?realValue?<?LoLo)?{
??????????return?{?Lo:?true?}
????????}?else?if?(realValue?>?LoLo?&&?realValue?<?Lo)?{
??????????return?{?Normal:?true?}
????????}?else?if?(realValue?>?Lo?&&?realValue?<?HiHi)?{
??????????return?{?Hi:?true?}
????????}?else?if?(realValue?>?HiHi)?{
??????????return?{?HiHi:?true?}
????????}?else?{
??????????return?{?Normal:?true?}
????????}
??????}
????}
??}
}
運行參數(shù)的顏色css來設定
<style?lang='scss'?scoped>
.LoLo?{
??color:?var(--LoLo-color);
??font-weight:?bolder;
??font-size:?18px;
}
.Lo?{
??color:?var(--Lo-color);
??font-weight:?bolder;
??font-size:?18px;
}
.Normal?{
??color:?var(--Normal-color);
??font-weight:?bolder;
??font-size:?18px;
}
.Hi?{
??color:?var(--Hi-color);
??font-weight:?bolder;
??font-size:?18px;
}
.HiHi?{
??color:?var(--HiHi-color);
??font-weight:?bolder;
??font-size:?18px;
}
.CommAlarm?{
??color:?var(--comm-alarm-color);
??font-weight:?bolder;
??font-size:?18px;
}
.dd?{
??animation:?shake?1s;
??-o-animation:?shake?1s;
??-webkit-animation:?shake?1s;
??-moz-animation:?shake?1s;
}
@keyframes?shake?{
??0%,100%?{-webkit-transform:?translateX(0); }
??10%,30%,50%,70%, 90%?{
????-webkit-transform:?translateX(-5px);
??} 20%,40%,60%,80%?{
????-webkit-transform:?translateX(5px);
??}
}
}
而在入口文件index.css中定義顏色
:root?{
??--LoLo-color:?#e1bb36;
??--Lo-color:?#7dc5eb;
??--Normal-color:?#5BE126;
??--Hi-color:?#f7680a;
??--HiHi-color:?#df1d1e;
??--comm-alarm-color:?#df1d1e;
??--accident-lower:?#DAE126;
??--accident-high:?#E13C26;
??--running-low:?#26DAE1;
??--running-high:?#E17126;
??--bolt:?#89A4C0;
}
min.js 中引入?import?'@/styles/index.scss'
這樣功能就實現(xiàn)了
