vue-easytable 5000条数据攻城

2019/04/11 16:03
阅读数 81
//引入vue-easytable

import '@/libs/vue-easytable/libs/themes-base/index.css';
import {VTable} from '@/libs/vue-easytable'


<!--
easyTable-扩展
ps:
1、数据来源 (头部、body)
2、功能:
列拖拽width改变
列左右拖拽
列头点击排序(sort权重)
sort权重排序(多列未完成)
全量数据模糊搜索
行hover/checked (hover消除)
td单独渲染dom
列显示隐藏(将header数据移除即可)
筛选访客类别
3、5000数据首次渲染(全量一次性渲染) 10s卡顿 可以分步渲染 达到1s内显示

  

-->
<template>
<div class="tablePage">
<!--<div class="pd-10">-->
<!--<label>搜索:<input class="searchInput" type="text" v-model="searchKeyWord" placeholder="请输入搜索内容"><i @click="searchClick" class="cursor-hand el-icon-search"></i></label>-->
<!--</div>-->
<!--  渲染分类项
<el-checkbox-group v-model="checkList">
<el-checkbox style="display: block" v-for="op in CASList" :label="op.label" :key="op.label">{{op.value}}</el-checkbox>
</el-checkbox-group>
-->

<div class="pd-10 mgb-15">
<el-button type="warning" @click="getLocationData">拉取本地数据</el-button>
<el-button class="mgl-10" type="warning" @click="getYAPIData">拉取mock数据</el-button>
</div>
<!--getYAPIData-->
<!-- 表格-->
<v-table
column-width-drag
is-horizontal-resize
style="width:100%"
:columns="columns"
:table-data="tableData.filter(data => CAS === [] || (CAS.indexOf(data.CAS)>-1))"
row-hover-color="#eee"
row-click-color="#edf7ff"
:show-vertical-border="true"
:multiple-sort = "true"
sort-always
@sort-change="sortChange"
:is-vertical-resize="true"
:rowClick="rowClick"
></v-table>
</div>
</template>

<script>

import API from "@/api/demo"
import {VTable} from '@/libs/vue-easytable'
import {regFun} from '@/assets/javascript/common.js';
import Vue from 'vue'

//表格自定义内容组件引入
import {
TableAsc,
TableVisitorName
} from './TableTemplate'
// 自定义列组件
Vue.component('table-cas',TableAsc);
Vue.component('table-visitorname',TableVisitorName);

export default {
name: "Table",
data(){
return {
columns: [],//表头数据
tableData: [],//表数据
tableDataConst:[],//缓存原始表数据 过滤数据使用
dataPage:5,//分页预留
startIndex:1,//拖拽开始索引
endIndex:1,//拖拽结束索引
sortNumber:{},//多列排序:按排列顺序
searchKeyWord:'',//搜索关键字
CAS:['1','2','3']//筛选访客状态
}
},
components:{
VTable
},
methods:{
//多列排序
sortChange(_data){//asc升序 小-》大 & desc降序
console.time('排序计算用时');
let _tableData = this.tableData;
let _key = Object.keys(_data)[0];
console.log(_data[_key]);
_tableData.sort((a,b)=>{
// return (a[_key] > b[_key]);
let A = a[_key],
nA = isNaN(A),
B = b[_key],
nB = isNaN(B);
// 两者皆非number
if(nA && nB){
if (A===""){ return -1;}
if (B===""){ return 1;}
return (A===B?0:A>B?1:-1);
}else if(nA) {
return -1;
}else if(nB) {
return 1;
}else {
return A===B?0:A>B?1:-1;
}
});
if(_data[_key] == 'desc'){
//_tableData = _tableData.reverse();
}
this.tableData = _tableData;
this.tableDataConst = _tableData;
console.timeEnd('排序计算用时');
console.time('排序视图更新用时');
this.$nextTick(function () {
console.timeEnd("排序视图更新用时");
})
//this.tableData[Object.keys(_tableData)]
},
//重新拉取本地数据
getLocationData(_count){
console.time('重新拉取本地数据用时');
let _lData = this.$store.state.tableData;
this.tableData = _lData.tableData.tableData;
console.timeEnd('重新拉取本地数据用时');
this.tableDataConst = _lData.tableData;
console.time('拿到数据后更新视图用时');
this.$nextTick(function () {
console.timeEnd("拿到数据后更新视图用时");
})
},
//重新拉取本地数据
getYAPIData(_count){
console.time('重新拉取mock数据用时');
let _lData = this.$store.state.tableData;
this.tableData = _lData.tableData.tableData;
console.timeEnd('重新拉取mock数据用时');
this.tableDataConst = _lData.tableData;
console.time('重新拉取mock数据后更新视图用时');
this.$nextTick(function () {
console.timeEnd("重新拉取mock数据后更新视图用时");
})
},
//模糊搜索
searchClick(){

},
//行点击回调
rowClick(_index,row,header){
this.$store.commit('visitor/vid',row);
this.bus.$emit('checkVisitor',{msg:'选中了访客',vid:row.ID});
}
},
computed:{

},
watch:{
endIndex(_new,_old){
console.time('拖拽排序用时');
let that = this;
this.columns.splice(_new, 1, ...this.columns.splice(this.startIndex, 1, this.columns[_new]));
this.$nextTick(function () {
console.timeEnd("拖拽排序用时");
})
},
sortNumber(_new){
let _newKeyArr = Object.keys(_new);
this.columns.forEach((op)=>{
_newKeyArr.forEach((item)=>{
if(op.field == item){
op.sortNumber = _new[item];
}
})
})
},
searchKeyWord(_new){
console.time('搜索用时');
let that = this;
this.tableData = this.tableDataConst.filter(data => (!_new ||
data.OperName.toLowerCase().includes(_new.toLowerCase()) ||
data.visitorname.toLowerCase().includes(_new.toLowerCase()) ||
data.Keyword.toLowerCase().includes(_new.toLowerCase()))&&(that.CAS.indexOf(data.CAS.toString() )>-1)
);
this.$nextTick(function () {
console.timeEnd("搜索用时");
})
},
CAS (_new){//类型筛选用时
console.time('类型筛选用时');
//let that = this;
//this.tableData = this.tableDataConst.filter(data => _new === [] || (_new.indexOf(data.CAS.toString() )>-1))
this.$nextTick(function () {
console.timeEnd("类型筛选用时");
})
}
},
filters:{},
async created(){
let that = this;
console.time("头部数据请求用时");
await API.postVisitorList({id:'123',name:'admin'});
let _tableHeader = await API.getTableHeader();
this.columns = _tableHeader.data.tableHeader;
console.timeEnd('头部数据请求用时');
console.time("table数据请求用时");
let _tableBody = await API.getTableBody();//await API.getTableBodyLocal();
this.tableData = _tableBody.tableData;
console.timeEnd('table数据请求用时');
this.tableDataConst = _tableBody.tableData;
/* console.time("table数据筛选用时")
this.tableData = this.tableDataConst.filter(data => that.CAS === [] || (that.CAS.indexOf(data.CAS.toString() )>-1))*/
//console.timeEnd("table数据筛选用时")
console.time('拿到数据后更新视图用时');
this.$nextTick(function () {
console.timeEnd("拿到数据后更新视图用时");
})
},
mounted(){
let domTime = window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart;
console.log("结构dom渲染时间:"+domTime+"ms");
this.bus.$on('VListSearch',val=>{
this.searchKeyWord = val;
});
this.bus.$on('VListType',val=>{
this.CAS = val;
});
this.bus.$on('checkVisitor',val=>{
console.log(this.$store.state.visitor.data)
})
}
}
</script>

<style lang="scss">
.tablePage{
.searchInput{
border: none;
border-bottom: 2px solid;
position: relative;
top: -2px;
font-size: 12px;
padding: 5px 20px;
}
.cursor-hand{
position: relative;
left: -17px;
}
}

</style>

//vue-easyTable 源码扩展

<td v-for="(col,colIndex) in noFrozenCols"
:class="[col.titleCellClassName]"
ref="vList1"
@mouseup="dragUp($event,col,colIndex)"
@mousemove.stop="handleTitleMouseMove($event,col.field)"
@mousedown.stop.prevent="handleTitleMouseDown($event),dragDown($event,col,colIndex)"
@mouseout.stop="handleTitleMouseOut()"
@click.stop.prevent="titleCellClick(col.field,col.title,col),sortClick($event,col)"
@dblclick.stop="titleCellDblClick(col.field,col.title)">

//data
sortNumber: 0,//当前数字缓存
sortNumberObj: {},//列头字段 + 排序
dragStartX:0,//列头-鼠标按下x
dragStartIndex:0,//列头-鼠标按下x
dragEndX:0,//列头-鼠标抬起x
dragEndIndex:0,//列头-鼠标抬起x

//methods
//表头顺序计数  --操作右侧列表头
sortClick(_el,_col){
console.time('表头计数用时');

if((_col.sortNumber == 0 || typeof _col.sortNumber == 'undefined') && Math.abs(this.dragX.result)<15){
this.sortNumber += 1;
_col.sortNumber = this.sortNumber;
this.$set(this.$parent.sortNumber,_col.field,this.sortNumber)
}
this.$nextTick(function () {
console.timeEnd("表头计数用时");
})
},
//表头拖拽结束--操作右侧列表头
dragUp(_el,_col,_index){
//console.time('拖拽时间')
this.dragEndX = _el.clientX;
this.dragEndIndex = _index;
if(Math.abs(this.dragX.result)>60){
this.$set(this.$parent,'startIndex',this.dragStartIndex);
this.$set(this.$parent,'endIndex',this.dragEndIndex);
}
//console.timeEnd('拖拽时间')
//console.time('拖拽后更新视图用时')
// this.$nextTick(function () {
// console.timeEnd("拖拽后更新视图用时");
// })
},
//表头拖拽开始--操作右侧列表头
dragDown(_el,_col,_index){
this.dragStartX = _el.clientX;
this.dragStartIndex = _index;
}

//表格自定义内容组件js

export const TableAsc = {
template:`<div>
{{rowData.CAS}}<img :src="rowData.cas_img" alt="">
</div>`,
props:{
rowData:{
type:Object
},
field:{
type:String
},
index:{
type:Number
}
}
}
//姓名
export const TableVisitorName = {
template:`<div>
<span class="mgr-5"> {{rowData.visitorname}}</span><img :src="rowData.visitorname_img" alt="">
</div>`,
props:{
rowData:{
type:Object
},
field:{
type:String
},
index:{
type:Number
}
}
}
展开阅读全文
cas
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
在线直播报名
返回顶部
顶部