宁波网站建设首选品牌,房产类网站制作商,沂水建设局网站,网站的不同类今天遇到需求#xff0c;iview组件分页每页100页时候页面卡顿现象严重#xff0c;改造为使用vxe-table
cell-mouseenterhandleCellMouseEnter
cell-mouseleavehandleCellMouseLeave
这两个用来处理vxe-table 内容过多鼠标悬浮上去滚动 tooltip直接…今天遇到需求iview组件分页每页100页时候页面卡顿现象严重改造为使用vxe-table
cell-mouseenterhandleCellMouseEnter
cell-mouseleavehandleCellMouseLeave
这两个用来处理vxe-table 内容过多鼠标悬浮上去滚动 tooltip直接消失的问题 :scroll-y{enabled: true, gt: 0} 开启大量数据优化
理论上限纵向最大可以支持 30w 行当 gt 为 0 时为总是启用。
性能优化纵向虚拟滚动行高越高越流畅行高设置 row-config.height 注意slot写法需要修改原版iview配置 改成
template v-slot:examine_name{ row }。。。/template renderer组件是处理iview的render 新建renderer.vue文件输入下面的代码
script
export default {components: {},name: renderer,props: {renderContent: {type: Function},scope: {type: Object}},render: function(h) {const { renderContent, scope } thisreturn renderContent(h, scope)},data() {return {}},mounted() {},methods: {}
}
/scriptstyle langscss scoped/style使用 import Vue from vue
import vTable from ./vTable/index.vue
Vue.component(vTable, vTable)
旧 Table border :columnstable.columns :datatable.data :loadingtable.loading template slot-scope{ row } slotexamine_name 。。。/template /Table
新 vTable :tabletable template v-slot:examine_name{ row }。。。/template /vTable
注意vxe-table 列拖拽宽度可以使用minWidth了 而iview必须有width 使用列复选框
vTable :tabletable checkbox on-selection-changeselectionChange
不要写{ title: 选中, type: selection, align: center, width: 70 }
注意不要再写iview的这个了不然项目就卡死机啦
其他配置项见 Vxe Table v3
完整封装代码
templatediv!-- :row-config{ isHover: true } --vxe-tablecheckbox-allselectChangeEventcheckbox-changeselectChangeEventcell-mouseenterhandleCellMouseEntercell-mouseleavehandleCellMouseLeave:column-config{ resizable: true }:tooltip-config{ enterable: true }:scroll-y{ enabled: true, gt: 0 }classmytable-style:datatable.databorder:loadingtable.loadingvxe-column v-ifcheckbox aligncenter typecheckbox width60/vxe-columnvxe-columnv-for(column, index) in table.columns:keycolumn.key index:fieldcolumn.key:titlecolumn.title:min-widthcolumn.minWidth:widthcolumn.width:fixedcolumn.fixed:aligncolumn.align:title-suffixcolumn.titleSuffix:show-overflowcolumn.key ! action ? tooltip : false!-- 渲染形式 --template #defaultscope v-ifcolumn.renderrenderer :renderContentcolumn.render :scopescope/renderer/template!-- 自定义插槽 --template #defaultscope v-else-ifcolumn.slotslot :namecolumn.slot :rowscope.row/slot/template/vxe-column/vxe-table/div
/templatescript
import renderer from ./renderer.vue
export default {components: { renderer },name: vTable,props: {table: { type: Object, default: () {} },checkbox: { type: Boolean, default: false }},data() {return {timeout_showTooltip: null}},mounted() {},methods: {selectChangeEvent(val) {this.$emit(on-selection-change, val.records)},// methods// vxe-table 的 tooltip 加上滚动条后, tooltip 关闭再打开, 滚动条仍然在之前 tooltip 滚动到的位置// 因此给 tooltip 的滚动主体加上 scrollTop 置空handleCellMouseEnter({ $table }) {// 取 tooltip 实例const $tooltip $table $table.$refs $table.$refs.tooltipif ($tooltip $tooltip.$el) {// 如果此时设置了 tooltip 要显示但尚未生效, 则延时显示 tooltip , 避免 tooltip 内滚动条还未重置// 注意, 此处是鼠标移入单元格, 即将显示 tooltip场景, 在此处处理 scrollTop 重置// 不在 mouseleave 处理, 是因为 mouseleave 时这两个数据不准, 从一个有 tooltip 的 cell 移动到下一个, 这两个数据仍然是 true , 因此无法做到鼠标移出单元格, tooltip 即将关闭, 此时重置 scrollTopif ($table.tooltipStore.visible !$tooltip.visible) {// 清除旧延时, 避免快速切换 tooltip 时, tooltip 的滚动条还未重置就显示出来了if (this.timeout_showTooltip) {clearTimeout(this.timeout_showTooltip)}// 延时显示 tooltipthis.delayShowTooltip($tooltip.$el)}}},// 延时显示 vxe-table tooltip// 因为 tooltipEl 为 display none 状态时设置 scrollTop 无效, 所以先通过 visibility 隐藏 tooltip , 重置 scrollTop 完毕后再恢复 visibledelayShowTooltip(tooltipEl) {// 取 tooltip 滚动主体元素const tooltipContentEl tooltipEl.querySelector(.vxe-table--tooltip-content)if (tooltipContentEl) {tooltipEl.style.visibility hiddenthis.timeout_showTooltip setTimeout(() {tooltipContentEl.scrollTop 0tooltipEl.style.visibility visiblethis.timeout_showTooltip null}, 600) // 延时 600 是因为 tooltip 默认 enterDelay 为 500 , 低于 500 会因为 tooltip el 尚未 display , 导致 scrollTop 设置仍然无效}},// vxe-table 的 tooltip , 存在内部滚动条滚动时触发 table 的 mousewheel 事件, 导致 table 主动关闭 tooltip问题// 因此给 tooltip 滚动主体加上 mousewheel stopPropagation , 停止向上传递 mousewheel 事件给 tablehandleCellMouseLeave({ $table }) {// 取 tooltip 实例const $tooltip $table $table.$refs $table.$refs.tooltipif ($tooltip $tooltip.$el) {// 取 tooltip 滚动主体元素const tooltipContentEl $tooltip.$el.querySelector(.vxe-table--tooltip-content)if (tooltipContentEl !tooltipContentEl.onmousewheel) {tooltipContentEl.onmousewheel e e.stopPropagation()}}}}
}
/scriptstyle langscss scoped
::v-deep .vxe-header--column {background-color: #f0f2f5 !important;border-right: 1px solid #dcdee2 !important;border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}
::v-deep .vxe-body--column {background-image: none !important;border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}
::v-deep .vxe-table--tooltip-arrow {display: none;visibility: hidden;
}
/style
style
.vxe-table--tooltip-wrapper {max-width: 300px !important;max-height: 300px !important;overflow-y: auto !important;background-color: rgba(70, 76, 91, 0.9) !important;color: #fff !important;padding: 8px 12px !important;font-size: 15px;
}
.vxe-table--tooltip-wrapper.theme--dark.placement--top .vxe-table--tooltip-arrow,
.vxe-table--tooltip-wrapper.theme--dark.placement--top .vxe-table--tooltip-arrow:before {display: none;
}
.vxe-table--tooltip-wrapper.placement--top.is--enterable:after {bottom: 0px;
}
.vxe-table--empty-content {color: #303133;
}
/style
