vxe-table-demonic
Version:
一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...
342 lines (341 loc) • 13.9 kB
JavaScript
import { defineComponent, h, ref, computed, onUnmounted, watch, reactive, nextTick, onActivated } from 'vue';
import XEUtils from 'xe-utils';
import GlobalConfig from '../../v-x-e-table/src/conf';
import { useSize } from '../../hooks/size';
import { createResizeEvent } from '../../tools/resize';
import { browse } from '../../tools/dom';
import { GlobalEvent } from '../../tools/event';
import VxeLoading from '../../loading/index';
export default defineComponent({
name: 'VxeList',
props: {
data: Array,
height: [Number, String],
maxHeight: [Number, String],
loading: Boolean,
className: [String, Function],
size: { type: String, default: function () { return GlobalConfig.list.size || GlobalConfig.size; } },
autoResize: { type: Boolean, default: function () { return GlobalConfig.list.autoResize; } },
syncResize: [Boolean, String, Number],
scrollY: Object
},
emits: [
'scroll'
],
setup: function (props, context) {
var slots = context.slots, emit = context.emit;
var xID = XEUtils.uniqueId();
var computeSize = useSize(props);
var reactData = reactive({
scrollYLoad: false,
bodyHeight: 0,
rowHeight: 0,
topSpaceHeight: 0,
items: []
});
var refElem = ref();
var refVirtualWrapper = ref();
var refVirtualBody = ref();
var internalData = {
fullData: [],
lastScrollLeft: 0,
lastScrollTop: 0,
scrollYStore: {
startIndex: 0,
endIndex: 0,
visibleSize: 0,
offsetSize: 0,
rowHeight: 0
}
};
var refMaps = {
refElem: refElem
};
var $xelist = {
xID: xID,
props: props,
context: context,
reactData: reactData,
internalData: internalData,
getRefMaps: function () { return refMaps; }
};
var listMethods = {};
var computeSYOpts = computed(function () {
return Object.assign({}, GlobalConfig.list.scrollY, props.scrollY);
});
var computeStyles = computed(function () {
var height = props.height, maxHeight = props.maxHeight;
var style = {};
if (height) {
style.height = "".concat(isNaN(height) ? height : "".concat(height, "px"));
}
else if (maxHeight) {
style.height = 'auto';
style.maxHeight = "".concat(isNaN(maxHeight) ? maxHeight : "".concat(maxHeight, "px"));
}
return style;
});
var updateYSpace = function () {
var scrollYLoad = reactData.scrollYLoad;
var scrollYStore = internalData.scrollYStore, fullData = internalData.fullData;
reactData.bodyHeight = scrollYLoad ? fullData.length * scrollYStore.rowHeight : 0;
reactData.topSpaceHeight = scrollYLoad ? Math.max(scrollYStore.startIndex * scrollYStore.rowHeight, 0) : 0;
};
var handleData = function () {
var scrollYLoad = reactData.scrollYLoad;
var fullData = internalData.fullData, scrollYStore = internalData.scrollYStore;
reactData.items = scrollYLoad ? fullData.slice(scrollYStore.startIndex, scrollYStore.endIndex) : fullData.slice(0);
return nextTick();
};
var updateYData = function () {
handleData();
updateYSpace();
};
var computeScrollLoad = function () {
return nextTick().then(function () {
var scrollYLoad = reactData.scrollYLoad;
var scrollYStore = internalData.scrollYStore;
var virtualBodyElem = refVirtualBody.value;
var sYOpts = computeSYOpts.value;
var rowHeight = 0;
var firstItemElem;
if (virtualBodyElem) {
if (sYOpts.sItem) {
firstItemElem = virtualBodyElem.querySelector(sYOpts.sItem);
}
if (!firstItemElem) {
firstItemElem = virtualBodyElem.children[0];
}
}
if (firstItemElem) {
rowHeight = firstItemElem.offsetHeight;
}
rowHeight = Math.max(20, rowHeight);
scrollYStore.rowHeight = rowHeight;
// 计算 Y 逻辑
if (scrollYLoad) {
var scrollBodyElem = refVirtualWrapper.value;
var visibleYSize = Math.max(8, Math.ceil(scrollBodyElem.clientHeight / rowHeight));
var offsetYSize = sYOpts.oSize ? XEUtils.toNumber(sYOpts.oSize) : (browse.edge ? 10 : 0);
scrollYStore.offsetSize = offsetYSize;
scrollYStore.visibleSize = visibleYSize;
scrollYStore.endIndex = Math.max(scrollYStore.startIndex, visibleYSize + offsetYSize, scrollYStore.endIndex);
updateYData();
}
else {
updateYSpace();
}
reactData.rowHeight = rowHeight;
});
};
/**
* 清除滚动条
*/
var clearScroll = function () {
var scrollBodyElem = refVirtualWrapper.value;
if (scrollBodyElem) {
scrollBodyElem.scrollTop = 0;
}
return nextTick();
};
/**
* 如果有滚动条，则滚动到对应的位置
* @param {Number} scrollLeft 左距离
* @param {Number} scrollTop 上距离
*/
var scrollTo = function (scrollLeft, scrollTop) {
var scrollBodyElem = refVirtualWrapper.value;
if (XEUtils.isNumber(scrollLeft)) {
scrollBodyElem.scrollLeft = scrollLeft;
}
if (XEUtils.isNumber(scrollTop)) {
scrollBodyElem.scrollTop = scrollTop;
}
if (reactData.scrollYLoad) {
return new Promise(function (resolve) {
setTimeout(function () {
nextTick(function () {
resolve();
});
}, 50);
});
}
return nextTick();
};
/**
* 刷新滚动条
*/
var refreshScroll = function () {
var lastScrollLeft = internalData.lastScrollLeft, lastScrollTop = internalData.lastScrollTop;
return clearScroll().then(function () {
if (lastScrollLeft || lastScrollTop) {
internalData.lastScrollLeft = 0;
internalData.lastScrollTop = 0;
return scrollTo(lastScrollLeft, lastScrollTop);
}
});
};
/**
* 重新计算列表
*/
var recalculate = function () {
var el = refElem.value;
if (el.clientWidth && el.clientHeight) {
return computeScrollLoad();
}
return Promise.resolve();
};
var loadYData = function (evnt) {
var scrollYStore = internalData.scrollYStore;
var startIndex = scrollYStore.startIndex, endIndex = scrollYStore.endIndex, visibleSize = scrollYStore.visibleSize, offsetSize = scrollYStore.offsetSize, rowHeight = scrollYStore.rowHeight;
var scrollBodyElem = evnt.target;
var scrollTop = scrollBodyElem.scrollTop;
var toVisibleIndex = Math.floor(scrollTop / rowHeight);
var offsetStartIndex = Math.max(0, toVisibleIndex - 1 - offsetSize);
var offsetEndIndex = toVisibleIndex + visibleSize + offsetSize;
if (toVisibleIndex <= startIndex || toVisibleIndex >= endIndex - visibleSize - 1) {
if (startIndex !== offsetStartIndex || endIndex !== offsetEndIndex) {
scrollYStore.startIndex = offsetStartIndex;
scrollYStore.endIndex = offsetEndIndex;
updateYData();
}
}
};
var scrollEvent = function (evnt) {
var scrollBodyElem = evnt.target;
var scrollTop = scrollBodyElem.scrollTop;
var scrollLeft = scrollBodyElem.scrollLeft;
var isX = scrollLeft !== internalData.lastScrollLeft;
var isY = scrollTop !== internalData.lastScrollTop;
internalData.lastScrollTop = scrollTop;
internalData.lastScrollLeft = scrollLeft;
if (reactData.scrollYLoad) {
loadYData(evnt);
}
listMethods.dispatchEvent('scroll', { scrollLeft: scrollLeft, scrollTop: scrollTop, isX: isX, isY: isY }, evnt);
};
listMethods = {
dispatchEvent: function (type, params, evnt) {
emit(type, Object.assign({ $list: $xelist, $event: evnt }, params));
},
/**
* 加载数据
* @param {Array} datas 数据
*/
loadData: function (datas) {
var scrollYStore = internalData.scrollYStore;
var sYOpts = computeSYOpts.value;
var fullData = datas || [];
Object.assign(scrollYStore, {
startIndex: 0,
endIndex: 1,
visibleSize: 0
});
internalData.fullData = fullData;
// 如果gt为0，则总是启用
reactData.scrollYLoad = !!sYOpts.enabled && sYOpts.gt > -1 && (sYOpts.gt === 0 || sYOpts.gt <= fullData.length);
handleData();
return computeScrollLoad().then(function () {
refreshScroll();
});
},
/**
* 重新加载数据
* @param {Array} datas 数据
*/
reloadData: function (datas) {
clearScroll();
return listMethods.loadData(datas);
},
recalculate: recalculate,
scrollTo: scrollTo,
refreshScroll: refreshScroll,
clearScroll: clearScroll
};
Object.assign($xelist, listMethods);
var dataFlag = ref(0);
watch(function () { return props.data ? props.data.length : -1; }, function () {
dataFlag.value++;
});
watch(function () { return props.data; }, function () {
dataFlag.value++;
});
watch(dataFlag, function () {
listMethods.loadData(props.data || []);
});
watch(function () { return props.syncResize; }, function (value) {
if (value) {
recalculate();
nextTick(function () { return setTimeout(function () { return recalculate(); }); });
}
});
onActivated(function () {
recalculate().then(function () { return refreshScroll(); });
});
var resizeObserver;
nextTick(function () {
GlobalEvent.on($xelist, 'resize', function () {
recalculate();
});
if (props.autoResize) {
var el = refElem.value;
resizeObserver = createResizeEvent(function () { return recalculate(); });
resizeObserver.observe(el);
}
listMethods.loadData(props.data || []);
});
onUnmounted(function () {
if (resizeObserver) {
resizeObserver.disconnect();
}
GlobalEvent.off($xelist, 'resize');
});
var renderVN = function () {
var _a;
var className = props.className, loading = props.loading;
var bodyHeight = reactData.bodyHeight, topSpaceHeight = reactData.topSpaceHeight, items = reactData.items;
var vSize = computeSize.value;
var styles = computeStyles.value;
return h('div', {
ref: refElem,
class: ['vxe-list', className ? (XEUtils.isFunction(className) ? className({ $list: $xelist }) : className) : '', (_a = {},
_a["size--".concat(vSize)] = vSize,
_a['is--loading'] = loading,
_a)]
}, [
h('div', {
ref: refVirtualWrapper,
class: 'vxe-list--virtual-wrapper',
style: styles,
onScroll: scrollEvent
}, [
h('div', {
class: 'vxe-list--y-space',
style: {
height: bodyHeight ? "".concat(bodyHeight, "px") : ''
}
}),
h('div', {
ref: refVirtualBody,
class: 'vxe-list--body',
style: {
marginTop: topSpaceHeight ? "".concat(topSpaceHeight, "px") : ''
}
}, slots.default ? slots.default({ items: items, $list: $xelist }) : [])
]),
/**
* 加载中
*/
h(VxeLoading, {
class: 'vxe-list--loading',
modelValue: loading
})
]);
};
$xelist.renderVN = renderVN;
return $xelist;
},
render: function () {
return this.renderVN();
}
});