element table 組件

功能: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)了

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容